Vue CLI 是 Vue.js 提供的命令行工具
我们可以使用它来快速创建一个脚手架项目

本文基于
Vue CLI 4.1.2
Node.js v13.5.0

简单介绍

在 Vue 框架中，我们可以通过数据驱动视图，实现数据与视图的分离
从而将关注点集中在逻辑上，让框架自动替我们完成麻烦的数据绑定

同时它也是一个容易上手的渐进式框架

创建 Vue.js 项目

用 npx 命令运行 Vue CLI
它能提供一些选项帮助我们建立脚手架项目

$ npx @vue/cli create hello-world

这里 npx 会先下载再运行 Vue CLI，不会污染全局依赖也不会在当前目录留下任何东西，十分干净

本文选择的配置如下

Please pick a preset
我们选择 Manually select features 以手动选择需要的特性
当然也可以使用自己定义的预设

Check the features needed for your project
本文选了几个常用的
Babel：能够把 ES6 版本的代码转换为向后兼容的 JavaScript 语法
Router：官方提供的路由管理器，用于实现单页应用
Vuex：官方提供的状态管理器，用于解决组件之间传递数据，共享数据的问题
CSS Pre-processors：CSS 预处理器，可以为 CSS 添加一些编程特性，方便 CSS 的编写，最后发布的时候再重新编译为浏览器可识别的 CSS 代码
Linter / Formatter：用于语法和格式检查
Unit Testing：用于单元测试

Use history mode for router
历史模式，这能把 URL 中的#去掉。不管它，开就完事了

Pick a CSS pre-processor
CSS 预处理器，使用 Less。哪个都行，与本文无关

Pick a linter / formatter config
看个人喜好，然后选择保存时检查

Pick a unit testing solution
单元测试我们选 Jest

Where do you prefer placing config
插件配置我喜欢整合起来，统一放在 package.json 里

Save this as a preset
不需要保存为预设

Pick the package manger
我用的 npm

然后它会把项目生成在当前目录下的 hello-world 文件夹中

运行

进入项目文件夹并在终端中输入

$ npm run serve

得到这样的输出

然后在浏览器中打开就行了

简单的项目介绍

这个项目大概长这样

assets
放些图片什么的

components
存放可复用的组件

router
在这里为单页应用配置路由

store
Vuex 相关，用于全局的状态管理

views
存放网站的所有页面

tests
单元测试

main.js
这里初始化 Vue.js，可以加载全局插件、全局组件

package.json
用于配置 Node.js 项目。然后因为我们在 CLI 中的配置，所以 ESLint、Jest 这些东西的配置也在里面