文章目录

• Vue CLI介绍
• • CLI是什么
  • 使用CLI的前提
  • • Node
    • Webpack
• CLI的使用
• • 安装Vue脚手架
  • CLI2初始化项目过程
  • CLI2目录结构的解析
  • ESLint规范
  • runtime-compiler与runtime-only的区别
  • render函数的使用
  • webpack打包项目与测试启动的区别

Vue CLI介绍

CLI是什么

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

使用CLI的前提

Node

• 官网下载NodeJS
  • 检测安装的版本
  • 默认情况下自动安装Node和NPM
  • Node环境要求8.9以上或者更高版本
    
• 什么是NPM呢？
  • NPM的全称是Node Package Manager
  • 是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准
  • 后续我们会经常使用NPM来安装一些开发过程中依赖包

Webpack

• Vue.js官方脚手架工具就是用了webpack
  • webpack对所有资源会压缩等优化操作
  • webpack在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效
• webpack的安装
  npm install webpack -g
  

CLI的使用

安装Vue脚手架

• 全局安装vue的脚手架
  npm install -g @vue/cli
• 注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。我们需要以下代码安装脚手架2
  
  npm install -g @vue/cli-init

CLI2初始化项目过程

• Vue-CLI2初始化项目,在自己要创建的目录下运行下面的脚本
  vue init webpack my-project,my-project为项目名称
• 运行之后需要给项目进行相关配置,具体配置如下图
  
• 配置好之后就会在当前项目下生成项目文件
  

CLI2目录结构的解析

打开我们的项目会发现有许多文件，根据下面这张图来了解这些文件都是用来干啥的。

小知识：当我们想要执行js代码时，就必须借助浏览器运行html，再该html中引入我们要运行的js文件，非常难受，其实node可以直接执行js文件: node js文件路径

node test.js

ESLint规范

ESLint是一种格式规范，在使用vue脚手架时我们可以选择使用。当我们进行项目打包或测试时，如果代码格式不合规范就会报错。

例如一个方法的书写:

function sum (a, b) {
  return a + b
}
sum(1, 2)

• 如果你的代码格式符合规范，将会控制台输出以下结果
  
• 如果你的代码格式不符合规范，例如把sum之后的空格去掉，将会控制台输出以下结果

function sum(a, b) {
  return a + b
}
sum(1, 2)

ESLint对代码格式的要求是很严格的，我们如果想在打包时不使用该规范，我们可以关掉它

• 打开项目的config–>index.js文件在dev中把useESLint属性改为false即可。
  

runtime-compiler与runtime-only的区别

这是vue创建项目的两种方式，这两种方式针对template有不同的处理方式。

• compiler流程图
  template–>ast–>render–>vdom–>UI
  
• only流程图
  render–>vdom–>UI

可见only模式执行的过程更少，其实它的代码更少。
建议使用only模式

render函数的使用

webpack打包项目与测试启动的区别

• npm run build
  
• npm run dev