当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue脚手架安装以及vue脚手架创建项目（详细步骤），看这篇文章就行了，小白也能创建自己的项目

vue脚手架安装以及vue脚手架创建项目（详细步骤），看这篇文章就行了，小白也能创建自己的项目

2020年07月12日  | 移动技术网IT编程  | 我要评论

vue脚手架安装及vue脚手架创建项目（详细步骤）

vue是前端非常火的框架，学会这个框架麻麻再也不用担心我获取不到dom了

废话不多说，直接开整。

首先，我们要先到下载与电脑适配的nodejs文件到电脑上并安装

下载node安装包之后，直接傻瓜式安装就行
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

安装好nodejs之后，在电脑创建一个新文件夹，并在里面打开cmd窗口
在这里插入图片描述

cmd窗口打开之后，输入npm install nrm -g命令回车，全局安装nrm工具
在这里插入图片描述

显示这个提示，就说明nrm安装成功了
在这里插入图片描述

接下来继续输入nrm use taobao 切换使用淘宝源下载插件，这一步不是必要的，但决定了后面的下载速度
在这里插入图片描述
显示下面提示文本就切换成功了
在这里插入图片描述
现在准备工作就结束了，下面输入npm install @vue/cli -g安装vue脚手架,接下来的过程会很漫长，耐心等待
在这里插入图片描述
显示这个文本，就说明vue脚手架也OK了
在这里插入图片描述
下面是最后一步，也是最重要的一步，在命令行输入vue create my-project创建一个新项目（项目名称不能出现大写字母）
在这里插入图片描述
项目创建好之后会出现这个窗口，我们选择Manually select features 手动选择配置 （用上下箭头移动，回车键选择，后续才做也是如此）
在这里插入图片描述

我们选择Babel,Router,Veux,CSS Pre-processors，这四个选项（用上下箭头移动，空格键选中或取消），选择好之后，回车下一步
在这里插入图片描述

输入n 选择hash模式作为路由切换
在这里插入图片描述

选择Less css预处理器
在这里插入图片描述

选择把配置写在package.json文件夹内
在这里插入图片描述

选择是否保存以上配置到本地（根据个人需求选择） 接下来是漫长的安装过程
在这里插入图片描述

如果出现以下提示，那么恭喜你，你的项目已经搭建成功了
在这里插入图片描述

下面输入cd my-project 切换到项目目录，然后执行npm run serve 启动项目
弹出以下窗口信息，复制网址到浏览器就可以看到vue项目界面了（注意：此窗口不能关闭）
在这里插入图片描述
这就是默认的项目界面
在这里插入图片描述

本文地址：https://blog.csdn.net/weixin_48179599/article/details/106868354

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网