Vue学习—— CLI脚手架

Vue CLI脚手架

一、引入Vue CLI
如果你只是简单的写几个Vue的Demo程序，那么你们不需要Vue CLI。但是在开发大项目，必然需要使用Vue CLI。

• 使用Vue.js开发大型项目时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
• 如果每个项目都要手动完成这些工作，那么无疑效率比较低，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

二、CLI 的解释

• CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。
• Vue CLI是官方发布vue.js项目脚手架
• 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。

三、CLI的安装
前提——Node
安装代码：

npm install -g @vue/cli

拉取2.x模板（旧版本）代码：

npm install -g @vue/cli-init

Vue CLI2初始化项目指令：

vue init webpack my-project

Vue CLI3初始化项目指令：

vue create my-project

Vue CLI2详解

终端实现过程：

1. 先打开对应的文件夹，输入cd + 文件夹名字
2. 输入 vue init webpack + 项目名字（项目名字最好是英文），敲回车（就会开始下载一些模板download，有些慢）
3. project name 输入一个项目名字（一般项目名字和项目文件夹的名字相同，直接敲回车即可）
4. project description 输入这个项目的描述（可以直接敲回车，得到 A Vue.js project）
5. author 作者，如果配置了全局的git就会有一个默认值，可直接敲回车；或者没有配置就自己手动输入一个名字+邮箱
6. Vue build 项目构建，选择其中一个，一个是runtime+compiler，另一个是runtime-only。第二个更小，且运行效率更高，真正的项目开发使用更多。
7. install router 安装路由，（还未学习路由，先选择№）
8. use ESlint to lint your code 是否使用一些限制来限制你的js代码 ，一旦你的代码不规范就会爆红，可以选择n。但是当你选择了yes,就会让你选择一种规范，第一个是standard，第二个是airbnb,或者可以选择自己写一个规范。
9. set up unit tests 是否测试代码，就是可以写一些单元来测试代码是否可行，少用。
10. setup e2e tests with nightwatch 是否要端到端测试
11. 选用npm还是yarn来安装呢，一般就选npm
12. 敲回车就开始生成项目

补充：

Runtime——Compiler和Runtime-only的区别
如果在之后的开发中，依然使用template，就需要选择Runtime—Compiler
如果在之后的开发中，使用的是 .vue文件夹开发，那么可以选择Runtime-only

Vue-CLI目录结构详解

四、vue-cli 3 与 2 版本的区别

• vue-cli 3 是基于webpack 4 打造的，vue-cli 2 还是 webpack 3
• vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的 build 和 config 等目录
• vue-cli 3 提供了vue ui 命令 ，提供了可视化配置，更加人性化
• 移除了static 文件夹，新增了public 文件夹，并且 index.html 移动到了 public 中

五、Vue CLI 3 的使用
使用过程：

1. 终端输入vue create + 项目文件夹名字
2. pick a preset 选择一个配置，一个是默认，另一个自己手动配置，选择manually selectfeatures
3. check the features needed for your project 自己手动确认是否配置该选项，敲空格键表示选中（取消使用linter）
4. where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 选择打算将配置存放的位置 ，一个是dedicated config files 独立的配置文件，另一个是 package.json . 选择第一个
5. save this as a preset for future projects 是否保存
6. save preset as 给配置起名
7. pick the package manager to use when installing dependencies 选择安装，推荐使用npm
8. 敲回车就开始创建

目录结构

解释：

1. node_modules 通过node安装的某个包的存放位置
2. public 相当于以前的static
3. src 源代码的书写位置
4. .browserslistrc 配置浏览器相关的东西
5. .gitignore 一些忽略文件,不想上传给服务器与同事共享的话就可以选择忽略
6. babel.config.js 对Babel 的一些配置
7. package-lock.json 显示真实安装的版本的信息
8. package.json 显示版本信息
9. README.md 文档

将 Vue-CLI3项目跑起来需要在终端输入：

npm run serve

六、配置
UI方面的配置

启动配置服务器：vue ui