vue.js学习笔记--vue-cli基本使用

一、什么是Vue Cli

文档：https://cli.vuejs.org/zh/
如果只是写几个vue的demo程序，我们自然不需要vue-cli，但是如果我们要开发大型项目，我们需要考虑代码目录结构、项目结构和部署、热加载、代码测试等事情。如果每个项目都要手动完成这些工作，那工作效率是极低的，所以我们需要使用一些脚手架工具来帮助我们完成这些事情。

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

vue-cli使用前提：node、webpack
安装vue-cli：npm install -g @vue/cli （全局安装vue-cli3）
如果安装的是vue-cli3的版本，就不能按照vue-cli2的方式初始化项目

创建一个项目：vue create my-project （vue-cli3初始化项目）
vue-cli3和旧版使用了相同的vue命令，所以vue-cli2被覆盖了，如果你仍然需要使用旧版本的vue init功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
vue init webpack myproject

二、vue-cli2初始化项目过程

runtime-compiler和runtime-only区别：

• 使用两种方式创建的项目区别在于main.js文件。对于导入的APP组件，前者是先将该组件注册一下，然后在template模板中使用，最后使用模板替换挂载的el元素；后者是使用render函数进行渲染。
• 使用runtime-compiler创建项目时，template模板会先被解析为AST抽象语法树，然后抽象语法树会被传给render函数，然后通过render函数，将我们的这些tempalte转化为虚拟DOM，最后虚拟DOM会被渲染成真实DOM，显示在页面中。
• 而使用runtime-only创建项目时，没有之前的解析AST的步骤，直接使用render函数将template转化为虚拟DOM，进而转化为真实DOM
• 由此可见，使用runtime-compiler创建项目时，性能更高，构建后的代码量更少
• 如果在之后的开发中，依然要使用template，需要在客户端编译模板，就需要选择runtime-compiler（带有编译器）；如果在之后的开发中，使用的是.vue文件开发，那么可以选择runtime-only

三、vue-cli2目录结构解析

build： 包含webpack的一些配置，包括基础配置、开发环境配置和生产环境配置。基础环境配置中包含一些公共配置，开发环境和生产环境配置中包含一些特殊配置。在执行打包构建的时候，如果是开发环境下，则会将基础配置与开发环境配置合并得到最终配置；如果是生产环境，则会将基础配置与生产环境配置合并。
config： 定义了配置中的一些变量
node_modules: 当前项目依赖的包
src: 存放项目编写的代码
static: 存放项目需要的静态资源，打包构建时会原封不动地复制到dist文件夹
.babelrc: 与ES语法转化相关
.editorconfig: 对代码的文本编辑做一些统一，如字符编码、缩进风格
.postcssrc.js: 与CSS转化相关
index.html: 模板文件，单页面富应用
package.json: 管理项目中安装的包，以及一些脚本配置、项目信息等
package-lock.json: 在package.json文件中指定的是版本的区间，在package-lock.json中记录的是安装的真实的版本

四、vue-cli3变化

• 首先，vue-cli的升级不代表vue的升级，vue3.x的版本是后来19年发布的
• vue-cli3是基于webpack4打造，vue-cli2还是webpack3
• vue-cli3的设计原则是“0配置“，移除了根目录下的build和config文件夹
• vue-cli3提供了vue ui命令，提供了可视化配置，更加人性化
• 移除了static文件夹，新增public文件夹，并且将index.html移动到了public中

五、vue-cli3配置文件的查看和修改

由于vue-cli3的设计原则是”0配置“，所以3版本删除了根目录的配置文件，将配置文件隐藏起来了，大多数情况下我们都不需要再进行配置。
我们可以使用vue-cli3提供的可视化界面对一些配置做修改：

如果想要手动配置，可以在node_modules下的@vue文件夹里面查看：

如果我们对一些默认的配置不太满意，想要做出一些修改，可以在根目录下新建一个固定名称的文件，叫做vue.config.js。在这里编写的配置会和默认的配置进行合并，作为最终的配置。