文章目录

Vue CLI

  • 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.

  • <mark>如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI</mark>

# 什么是Vue CLI

<mark>使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。</mark>

如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

<mark>Vue CLI 是一个官方发布 vue.js 项目脚手架</mark>

<mark>使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置.</mark>

CLI是什么意思?
.
CLI 是 Command-Line Interface , 翻译为命令行界面, 但是俗称脚手架（下图就是建筑学上的脚手架）
.
<mark>用于预先搭建建筑的模型</mark>

# Vue CLI使用前提 - Node （已安装直接跳）

安装 NodeJS
可以直接在官方网站中下载安装.

检测安装的版本

默认情况下自动安装 Node 和 NPM
<mark>Node 环境要求8.9以上或者更高版本</mark>

什么是NPM呢?
.
NPM的全称是Node Package Manager
<mark>是一个NodeJS包管理和分发工具</mark>，已经成为了非官方的发布Node模块（包）的标准。
后续我们会经常使用NPM来安装一些开发过程中依赖包.

cnpm安装
.
由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用 <mark>淘宝 NPM 镜像</mark>。
.
你可以使用淘宝定制的 cnpm(gzip 压缩支持) 命令行工具代替默认的 npm:

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

这样就可以使用 cnpm 命令来安装模块了：

cnpm install [name]

# Vue CLI使用前提 - Webpack （已安装直接跳）

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

Webpack的全局安装

npm install webpack -g

# Vue CLI的使用

安装 Vue 脚手架

npm install -g @vue/cli

查看版本

vue --version

注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目是不可以的。

https://github.com/vuejs/vue-cli/tree/v2#vue-cli–
.
【拉取 2.x 模板 (旧版本)】

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

## Vue CLI 初始化项目 （先讲 vue cli 2）

vue cli 2

vue init webpack my-project

or
vue cli3 以上

vue create my-project

Author 哪里来的？
.
读取git的全局配置来的。（下图）.gitconfig 记录我们git的全局配置。

vue build?
.
我们现在选 runtime
.
后期，我们选另外一个。

<mark>ESLint 是什么？</mark>
.
lint 限制
ES Lint 对es的限制

.
<mark>对我们的代码格式做规范 / 检查</mark>

  • Standard 标准
  • Airbnb 爱比邻 （国外一个订酒店公司） 的规范
  • none 自定义

Test?
.
我们就不测试了，这里主要学开发。
.

最终生成的目录（目录结构下面讲）

运行

done

# 目录结构详解



再看看build文件夹下相关文件及目录：

config文件夹下目录和文件：

更多目录：查看

## package.json 文件

先看package.json

npm run build

通过 node 运行 build 目录下 build.js 文件

node.js 是使用 C++ 、 V8引擎 开发的
<mark>能直接运行 js 代码</mark>
.
而且和 普通浏览器运行 js 不同。

  • 普通浏览器执行 javaScript 流程： js ⇒ 字节码 ⇒ 浏览器
  • V8引擎，如 node.js、 chrome 执行 javaScript 流程： js ⇒ 二进制代码
    .

另外， chrome 也是 基于 V8引擎 的

npm run dev

搭建开发用的服务器

webpack-dev-server 的参数 - 参考

  • --quiet 控制台中不输出打包的信息
  • --compress 开启 gzip 压缩
  • --progress 显示打包的进度
  • --hot 开启Hot Module Replacement功能

## config/index.js


定义很多变量，大体分成两部分 dev 开发下的变量，build 生产时的变量

变量如

  • port 端口
  • host 项目uri
  • ...

## static 目录

放静态资源，编译后会<mark>原封不动的复制到 dist 文件夹里面</mark>

.gitkeep： git 的东西，git一般不会上传空文件夹。<mark>加了这个文件后，尽管这个文件夹为空，也会上传</mark>

## src 目录

我们写代码的地方

src/assets 目录

也是放静态资源的，但是和 static 不同，<mark>会根据资源的情况进行转换</mark>。

如：

  • 图片（小于某个limit会编译成base64放在代码中，大于某个 limit 会被重命名放在发布目录里）

## .babelrc

ES6 以上转为 ES5

## .editorconfig

代码风格统一

如编码、缩进、换行

  • charset = utf-8 <mark>编码格式</mark>
  • indent_style = space <mark>空格缩进</mark>
  • indent_size = 2 <mark>缩进两个空格</mark>
  • end_of_line = lf <mark>lf形式换行</mark>
  • insert_final_newline = true <mark>文件尾加一个空行</mark>
    trim_trailing_whitespace = true <mark>清除多余空格</mark>

## .eslintrc.js

eslint 检测策略

## .eslintignore

让 eslint 忽略某些文件，不去做代码的检查

## .gitignore

让 git 忽略某些文件，无去上传

## .postcssrc.js

post css 转化时候用的，一般不该

## package-lock.json

我们依赖的真实版本

## README.md

介绍文档

# ESLint 规范

## 自动匹配 ESLint 规范

在 vscode 里面，standard 标准，可以自动 fix 格式

安装 eslint 插件，在setting.json 里面添加（下面配置）

 //eslint 代码自动检查相关配置
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascriptreact",
        "vue",
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        {
            "language": "html",
            "autoFix": true
        }
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

## 关闭ESLInt

当然，你更多的思想关闭

关闭：在useEslint里面设置为false

# Runtime-Compiler和Runtime-only的区别

<mark>区别“只在”main.js 里面</mark>

看两种模式的 main.js 代码 （下图）

Template 渲染过程看下图（左）：

  1. 当使用 template（模板） 时候 ， template 数据会保存到 template 实例
  2. 然后 parse （解析）成 ast （abstract syntax tree 抽象语法树）
  3. 然后 compile （编译）成 render 函数
  4. 然后 render （渲染 ）成 virtual dom （虚拟dom）
  5. 最后 update 更新成 UI 显示

所以：

  • Runtime-Compiler 过程：template ⇒ ast ⇒ render ⇒ vdom ⇒ UI
  • Runtime-only 过程： render ⇒ vdom ⇒ UI （<mark>显然，这个性能高，且源码少（不需要template ⇒ ast的代码 ）</mark>）

现在，再看回创建项目时候的 说明就明白了

这里说的 减少的 6kb 明显是 compiler 的 内容！

那么，render 是什么？（下面讲）

现在先尝试 手动吧 Runtime-Compiler 转换成 Runtime-only

## 手动吧 Runtime-Compiler 转换成 Runtime-only

先把 App 注释，我们 先输出个 Hello World

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // components: {
  // App
  // },
  // template: '<App/>'

  // 1. createElement('标签', {标签的属性}, ['内容'])
  render: createElement => {
    return createElement('h2', { class: 'box' }, ['Hello World'])
  }
})

把 App 放开，传进去

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // components: {
  // App
  // },
  // template: '<App/>'

  // 1. createElement('标签', {标签的属性}, ['内容'])
  render: createElement => {
    return createElement(App)
  }
})

done !

## runtime-only 运行时没有 template

我们上面 把 main.js 中的 import App from './App' 放进 render 函数中，可以通过无 template 渲染

那么，我们看看 App 是否真的没有 template 属性

确认，没有 tempalte 属性后，却发现 App.vue 源码里面是有 template 的，这是什么回事？

## vue-templat-compiler 编译期间对 template 进行编译

我们看到 开发时依赖中有 vue-template-compiler

他会帮我们在开发期间，把 template 进行编译

## 总结 - （build、dev、runtime-template/only区别）

  • 如果你依然使用 template，就需要选择 Runtime-compiler
  • 如果你使用的shi .vue 文件开发，那么可以选择 Runtime-only
  • npm run build 命令，自动执行流程
  • npm run dev 命令，自动执行流程

# 修改：webpack.base.conf.js 起别名

# 认识 vue cli 3

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

## 创建项目：vue create 文件夹

一开始，要你选择一个配置模式

  • 默认配置
  • 手动配置（这里为了看有什么配置，选择这个）


然后 他说要选择的 插件

一些解释：

  • progressive web app(PWA) support - “先进的web app” ， 还没被推广，不过很多大公司在用
  • linter - 就是 ESLinter

其他展示用不上，现在只选择 babel （按空格选择）
回车

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
In package.json


你打算将  for Babel, ESLint, etc.  之类的配置文件放到哪里？
+ 独立一个配置文件？
+ 还是放在 package.json？

我们选择独立的（好管理）

Save this as a preset for future projects?
是否要将之前的选择保存成一个 preset ，为了以后创建项目时使用？

随便

preset 的使用和删除 https://www.jianshu.com/p/7f0563dbe792

  • vsc - version system controller
  • rc - run commend

done~

## 文件夹目录

目录简洁很多

package.json

package.json 更加简洁了

主要是依赖了 @vue/cli-service （这东西，间接帮我们管理了很多东西）

## 跑起来

npm run serve


## src/main.js


下面，什么意思？

Vue.config.productionTip = false ;

产品构建时候的一些信息
开发时候用不到，发布（构建）时候打开就好了

.$mount("#app");

上面，其实就是 el （2的版本 el 底层调用的 也是 $mount）

# vue ui

# 配置哪里找？

我们知道，vuevli2的配置放在 /config 目录下。
但vuecli3没有这个目录，那么配置在哪里指定呢？（前面讲了，我们可以在 vue ui 里面配置，但这里考察具体的配置文件在哪？）

我们看 package.json 文件有个开发依赖 @vue/cli-service ，我们的配置就在这里指定

来到 @vue/cli-service


找到了！

# 我们想自己配置，怎么办？

vue cli 提供了解析用户配置的方法

（方法看下图，loadUserOptions）

在根目录 / 下创建 vue.config.js 文件 ，把配置写进去即可

文章目录