认识脚手架

• 简单的程序并不cli，大型项目必然cli
• cli解决手动配置：项目目录结构、项目部署、热加载、单元测试等
• cli ：Command-Line Interface 命令行界面，俗称脚手架
• Vue cli 官方发布的vue.js项目脚手架
• 使用vue-cli 可以快速搭建Vue开发环境以及对用的webpack配置
• vue-cli使用前提是node.js 还有 webpack（cli 自动生成webapck相关配置）
  npm 经想切换教程 --by 菜鸟教程

vue cli的安装

全局安装：
npm install -g @vue/cli - vue cli 3.0.x
在cli 3 上使用cli2 的 vue init 功能，则需要全局安装桥接工具
npm install -g @vue/cli-init

vue cli2 项目初始化

npm init webpack 工程文件夹名字
vue cli 项目建立：

• Project name ：工程名package.json中可以看见，一般默认

• Project description ：项目描述

• Author ：作者，默认读取的git用户

• （1）Runtime + Compiler: recommended for most users（大多数人会用这个）

• （2）Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - ren
  der functions are required elsewhere （项目中大多数用这个，优势：包小，效率高）

• Install vue-router？路由安装 暂时不用，后面会有

• Use ESLint to lint your code? 规范代码使用的，一般NO

• Set up unit tests ？是否设置单元测试 NO

• Setup e2e tests with Nightwatch? 端到端测试使用Nightwatch，自动化测试框架 NO

• Should we run npm install for you after the project has been created? (recommended) (Use arrow keys) 项目管理工具的使用选择 这里用NPM

vue cli3 项目初始化

npm create 项目名

• Please pick a preset: (Use arrow keys)

default (babel, eslint) 默认选择
Manually select features 手动选择

空格选择与取消

• Where do you prefer placing config for Babel, ESLint, etc.? 配置文件是单独还是在package.json中？

In dedicated config files 独立
In package.json 合在一起

• Save this as a preset for future projects? (y/N) 要不要保存为preset方便以后直接选择
• Save preset as: 上一步选择是之后，这一步是让你为这个配置起一个名字

以上内容可以根据自己的需要来选择，之后cli会自己创建工程

vue cli 2目录结构介绍

• build
  
• config
  

上边两个是关于 webapck的配置，读配置时要从package.json开始读，package.json中也包含使用vue cli创建项目的配置

• src 写代码的文件夹
• static 静态资源
• babelrc 关于es6的适配
• editorconfig 对代码进行统一，缩进风格等等
• eslintignore 忽略检测
• gitignore 配置上传时不需要上传的文件
• eslintrc 代码规范检测
• postcssrc.js css转换时配置
• index.html 模板代码
• package.json 管理node包（模糊指定安装模块、插件等版本
  ）、工程等
• package-lock.json 记录node_modules 真实版本
• READEME 写文档

runtime compiler与 runtime-only 区别

左边：runtime compiler
右边：runtime-only

Vue程序的运行过程

1.template 解析 成 ast（抽象语法树）
2.ast 编译成 render函数
3.render函数则根据这些渲染成虚拟DOM
4.虚拟DOM - > 真实DOM
runtime-only：则直接通过render函数到 VDom 然后到UI
runtime-compiler：则是老套的步骤编译
于是便可以察觉runtime-only 比 runtime compiler 更快更简洁

vue cli 3目录结构介绍

配置文件消失、static变成了public文件夹，其他的意外几乎不变

相较上边的runtime-only 、 runtime compiler main.js变化为将el换成了mount但功能是一样的

vue cli3的配置修改方法

法一、vue ui

在Terminal中输入 vue ui 之后会创建一个service，跳出来一个网站，这个是GUI，我们可以在这里 通过可视化界面配置vue工程
之后可以导入项目根据提示进行配置

法二：

node_modules -> @vue -> cli-service -> webpack.config.js
可以在这个配置文件，根据逻辑来修改配置

法三：

在项目根目录创建 vue.config.js 在这个文件里写配置也是可以的

----by小码 笔记