vue环境搭建到新建项目

windows系统下vue环境搭建到新建项目

当前教程适用于脚手架2.x，如需查看3.x以上的，请滚动到最底部

当前教程适用于脚手架2.x，如需查看3.x以上的，请滚动到最底部

当前教程适用于脚手架2.x，如需查看3.x以上的，请滚动到最底部

1、node安装

首先先安装node（下载网址：https://nodejs.org/en/），安装并没有太难的流程，一直点击下一步就可以了，安装完成之后，在控制台打印，查看node是否正确安装成功，如果能出来版本信息，说明安装成功

2、安装国内的淘宝镜像(cnpm)

在控制台上输入 npm install -g cnpm --registry=https://registry.npm.taobao.org，稍等一会即可安装完成，之后的安装即可使用cnpm来进行操作

3、安装webpack

在控制台上输入命令cnpm install webpack -g或npm install webpack -g，即可安装webpack

4、安装vue-cli脚手架

输入cnpm install vue-cli -g或npm install vue-cli -g，输入完成后，可能会让你再安装webpack-cli，根据各自情况来进行处理

到此为止，基本的环境就已经搭建好了，可以进入路径进行查看你安装的信息

5、新建项目

（1）、首先考虑好要将项目放到哪个目录下，我这里放到D盘中的vue文件夹下

（2）、假设我要新建一个名叫firstvue的项目(不要有大写)，可以看到，vue文件夹下，并没有这个项目

（3）、打开控制台（或者vscode中的终端，我这里操作用的是vscode），进入到第（1）步中，你考虑好的目录下，比如我这里是D:\VScode\project\project\vue，通过cd 来进入目标文件

（4）、进入之后输入vue init webpack firstvue，然后回车，之后会询问你项目名称，会有建议，直接输入建议的firstvue就可以了，然后继续回车，如图：

（5）、然后会让你输入这个项目的描述，比如主要是做什么的，这里直接回车跳过

（6）、提示该项目的作者信息，可填也可不填，我这里直接回车跳过

（7）、然后会出现上图的选择，这里我们直接回车，然后出现下图，询问你要否要安装vue-router（页面跳转功能必须要的功能），我们这里选择安装，输入Y或者y

（8）之后的，我们全部都不安装，输入n，直到出现下图为止

（9）直接回车，选择NPM，之后等待项目创建完成，如下图，就表示创建成功了

（10）、之后通过cd进入到该项目中，输入npm run dev或者cnpm run dev，等待启动完成，之后输入启动后显示的网址到浏览器上，如果能正确打开，至此该项目就创建完成了

 

vue脚手架3.x以上教程

环境安装步骤请参考2.x的1、2、3、4，然后安装vue-cli,cnpm install vue-cli -g @vue/cli

1、新建项目(一样需要注意的是，项目名称避免出现大写)，否则会报错，如下

控制台输入vue create vueproject，其中vueproject为你的项目名称

正常下会出现下图，红色划掉的部分不必理会，后续步骤会教，此处先做个标记

2、经过第一步之后，我们如果选择default的话，就会直接创建项目，项目包括了babel与eslint两个包功能，平时可能不适合我们，我们可以选择增加更多或删减多余的包，以更适合我们的工作，所以我们选择Manually select features，上下方向键选择后，按enter进入，进入后如下图

3、括号内带*号的就表示你接下来的创建项目过程中，需要安装此包，如需添加更多或取消多余的，同样是用上下方向键，然后可通过空格键来切换，如图，我自己想要装如下包

4、选择完成后，直接按enter，会进入下图所示，他提示你安装了哪些包，因为你安装了router，所以下图所示，会提示是否要使用hsitory的路由模式，我这里选择y，根据自身情况可选择n

5、输入y之后，会提示你要选择哪种的css选择器，根据自身选择情况不一样，出来的提示也不一样，这里我选择less

6、然后会询问你要将包的信息放置到哪里，我这里选择放到package.json，次步类似于--save

7、之后会询问你是否将此次的操作步骤保存，我这里输入y，然后会询问你为此次的操作命名，我这里输入Agwenbi-ceshi

8、输入完成之后，我们的项目就已经进入到创建的过程了，创建完成后，根据提示操作即可

9、在第一步的操作过程后，我们预留了一个标记，忘记了的可以回去看看，为实现此处的标记，我们再创建一个项目，此时你会发现，没错，红色的部分，就是你刚刚保留的操作步骤，你可以直接选择，项目将直接进行创建操作，省去很多繁琐的步骤

10、如果我们需要删除多余的操作步骤名，我们可以进入下图的位置

找到，使用记事本或其它工具打开，打开后我们就可以看到刚刚命名的操作，我们如果要删除就可以在这里进行，下次进行创建项目的时候，就不会有这个操作步骤了