vue-cli脚手架构建过程

vue脚手架构建过程

才开始接触前端不久，经常忘记脚手架的构建过程，写给自己看的。

---

1、确保你已经安装好了node.js，并且npm（或cnpm）处于可用状态

2、全局安装必要的构建工具webpack和vue的脚手架构建工具vue-cli，命令行如下：

cnpm i -g webpack
cnpm i -g vue-cli （i是install的简写）

3、切换到你需要构建vue-cli的目录下，按住Shift+鼠标右键，从当前位置打开命令窗口，输入命令：

vue init webpack vue-cli

• 其中vue命令是全局安装vue和vue-cli之后在npm全局安装目录下生成的vue.cmd命令文件提供的命令

• 而vue init表示对vue的构建环境进行初始化设置

• 而之后的webpack命令同样是安装webpack之后提供的命令
• 而最后的vue-cli是我们要将构建好的项目存放的目录名称，可以自定义，但需要满足文件夹命令的规范，否则package.json文件无法自动生成，需要手动修改项目名

4、命令输入完成后会提示一些配置的输入，如下：

这个过程中需要修改的手动填入即可，使用默认配置直接Enter回车，对于不需要的配置填写“no”再回车，这些配置项的作用分别是：

• Project name：项目名称，默认使用项目文件名
• Project description：项目描述
• Author：作者基本信息
• Vue build：构建方式，询问是否使用箭头函数（回车Yes）
• Install vue-router：是否安装路由（回车Yes）
• Use ESLint to lint your code：是否使用ES语法检查（建议No，否则很烦人）
• Setup unit tests with Karma + Mocha/ Setup unit tests with Karma +Mocha/Setup e2e tests with Nightwatch：三种类型的测试工具（由于不会用，所以直接全部No）

5、配置完成，片刻后会在你当前的目录下生成文件夹“vue-cli”（这个文件夹名是自定义的），打开之后是这样的：

如果你对webpack和git都不是那么陌生的话，这层目录下的很多文件都应该知道是做什么的了。
这个时候你可以打开package.json文件看看当前项目的依赖包：

6、但这个时候你可以尝试回到vue-cli所在的目录看看这个文件夹的体积：

大小 26.6kb(27312字节)

我们知道，vue.js的文件就算是min版的也有70+kb的体积，对于一个这么多文件的项目来说25.6kb的文件体积肯定是不对的，这是因为我们现在还没有真正的完成依赖，因为这里还没有node_modules这样一个依赖包管理的主目录，这个时候得在vue-cli目录下输入以下命令：

cnpm i

等待命令执行完成后，我们就会发现node_modules这个文件夹了，这样一来，我们的项目才真正和这些程序包建立起了依赖。

7、vue-cli提供了一个叫做dev-server.js的文件让node可以去运行起我们的项目，可以在package.json文件里查看这个快捷命令：

也就是说这个时候只需要在项目根目录（vue-cli目录）下的命令行里输入以下命令即可：

npm run dev

命令运行完毕后命令行窗口会变成这样：

并且自动打开你的默认浏览器打开你的项目，效果如下：

8、那么，我们的vue-cli的构建工作就算做完了，如果你不喜欢你的默认浏览，你可以将地址栏内的内容复制到你喜欢的浏览器里去，把默认打开的浏览器关掉，这不会影响现有的任何功能。