Windows之vue-cli安装和vue项目快速搭建

一、提前安装好node.js，具体安装看我的上一篇博客Windows之node.js安装_zhang-php的博客-CSDN博客。

二、nodejs安装好后，默认带有npm。

三、使用npm安装vue-cli。

1、打开运行——输入cmd——切换到node.js的安装目录（C:\Users\asus>d:）。

2、输入npm install vue-cli -g，进行vue-cli安装，vue-cli是vue的脚手架。

3、安装完vue-cli后可以输入vue查看是否安装成功，vue list是查看vue现有的组件，其中webpack是我们常用的搭建项目的组件。

四、脚手架安装成功后，我们来使用webpack组件搭建一个简易的项目（在这里的时候可以先切换目录在进行安装，这样就可以将自己的项目安装到指定的地方，当然你也可以安装完毕之后再移动项目）。

1、Project name (sell)；项目名称（sell可以是自己取的名称）。（确定按enter，否按N）

2、Project description (A Vue.js project)；项目描述（一vue.js项目）。（可以随意输入一段简短介绍，用英文）

3、Author (zhang-php) <1935...@qq.com>；作者和邮箱。（确定按enter，否按N）

4、Vue build (Use arrow keys)  //主键的建立

> Runtime + Compiler: recommended for most users  //>运行时+编译器：大多数用户推荐

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render

functions are required elsewhere；//运行时间：约6kb轻民+ gzip，但模板（或任何Vue具体HTML）只允许在。VUE文件渲染功能是必需的其他地方。

两个Runtime是两个选项，可以使用上下箭头进行选择，确认后按回车,回车后可以看见

5、Install vue-router? (Y/n)；安装的路由？（N）。（根据需求选择）

6、Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ N）。（N）

7、Set up unit tests? (Y/n)；设置单元测试？（Y / N）。（N）

8、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？（Y / N）。（N）

到此之后有三个选项，我选的第一个，选项使用上下箭头进行切换，确认后按回车，然后等待项目的搭建。

五、到此项目搭建完成，默认搭建路径是node.js的安装路径中。

六、项目运行，项目搭建完成后输入：npm run dev，会出现一个网址，此时在浏览器输入该网址即可 。如果是二次进入该项目，即切换到项目当前目录，然后再输入：npm run dev 开始运行，如下，todoList表示您当前的项目名称。