Vue CLI 脚手架

初识Vue CLI

1.1 脚手架介绍

如果你只是写简单的demo程序，不需要用脚手架
如果开发大型项目，你必然需要使用脚手架
■ Vue CLI
CLI 是Command-Line interface，即命令行界面，俗称脚手架
Vue CLI是一个官方发布vue.js 项目脚手架
使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

1.2 脚手架使用前提—Node、Webpack

1.安装nodejs
2.检测安装版本
3.npm：是包管理和分发工具

cnpm安装
由于国内直接使用npm的官方镜像是很慢的，这里推荐使用淘宝NPM镜像
可以使用淘宝定制的cnpm命令行给工具代替默认的npm：

npm install -g cnpm --registry=https://registrty.npm.taobao.org

便可以使用cnpm命令来安装模块了
cnpm install [name]

■ Vue.js 官方脚手架用的是webpack模板
对所有的资源进行压缩等优化操作
它在开发过程中提供了一套完整的功能，能够使得我们的开发更加高效

1.3 脚手架的使用

1.安装Vue脚手架全局安装
-g：global

npm install -g @vue/cli

**2.检测安装版本 **
vue --version

1.4 创建项目

终端输入

npm run dev

执行package.json中“dev”的内容

ESLint

ESLint是代码标准

若想取消此标准限制，将index.js中的useEslint改为false即可

runtime-compiler和runtime-only区别

runtime-compiler的步骤：
template -> ast -> render -> virtual dom -> 真实dom

runtime-only的步骤
render -> virtual dom -> 真实dom

所以就可看出runtime-only相比runtime-compiler
1.运行效率高
2.源代码量更少

创建CLI3项目

vue create webpack 项目名 --save

3.1 CLI3目录分析

3.2 CLI3配置文件的查看和修改

方式一

■ UI方面的配置
启动配置服务器 vue ui (终端输入)

服务器自动跳转，显示当前项目所用插件，即package.json中显示的插件

方式二

新建一个 vue.config.js 文件夹，加入到git文件夹中

修改完文件后需：
在终端输入 git add .
git status
git commit -m ‘修改配置文件’

方式三