用vue-cli快速搭建vue项目

vue-cli是vue全家桶的重要内容之一，最近正在做一个小demo，顺便整理一下用vue-cli快速搭建vue项目的方法。
安装vue-cli是要基于node环境的，现在默认电脑上已经装有了node环境。

（1）用npm安装vue-cli

首先打开node的窗口，切换到要安装的文件夹下，输入命令：npm install vue-cli -g或是 cnpm install vue-cli -g

用npm安装vue-cli.jpg

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

查看vue是否安装成功.jpg

（3）用webpack创建一个项目

执行命令：vue init webpack 文件名
回车后根据要求填写一些信息。

1、Project name (bbs)；项目名称bbs是自己取的名字。然后按Enter键
2、Project description (A Vue.js project)；项目描述（一this is a vue-cli project）。（可以随意输入一段简短介绍，用英文）
3、Author (wuhongjing) [email protected]；作者和邮箱。（确定按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)；安装路由吗？（Y）。（根据需求选择）
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）

然后回车等待安装。

看到Project initialization finished!

To get started:

cd bbs
npm run dev
字样后就是安装成功了，可以执行下面的两行命令启动服务。执行npm run dev 后到下面的界面说明项目创建成功。

vue-cli建的项目.jpg

现在用npm run dev启动时已经不自动打开浏览器了，必须把 http://localhost:8081复制到浏览器的URL地址上才能运行，如果需要设置自动启动可以在/config/index.js文件里面将dev对象里的 autoOpenBrowser: false,//是否自动打开浏览器 改成true。