【Vue】Re13 CLI(Command Line Interface)

一、What is CLI

Command Line Interface 命令行接口

但是说是命令行界面，在官方又被称为脚手架

一个单词三个意思，所以令人困惑

但是根据实际意义用途来说就是帮助开发者更快的获取需要的东西

二、安装

前提还是NodeJS支持：

全局安装vue-cli

npm install @vue/cli -g

这是vue3，为什么不安装vue2，因为2已经包含在3内了

如果要以vue2的方式创建，就需要vue2的项目模板支持

所以获取vue2的项目模板：

npm install @vue/cli-init

三、创建项目

CLI2方式：

vue init webpack 项目名称

CLI3方式：

vue create 项目名

1、CLI2的安装详细描述：

D:Vue-LearnCodeWhy10-cli>vue init webpack vue2cli_project_sample

  Command vue init requires a global addon to be installed.
  Please run npm i -g @vue/cli-init and try again.


D:Vue-LearnCodeWhy10-cli>npm i -g @vue/cli-init

没装对？提示按这个命令装

初始化选项

1、项目名称设置：

可以和上面的项目名称同名，命令行的名称其实是项目的目录名称

VueCli允许项目的名称和目录名不一样，单独设置，创建完成之后是写在package.json里面

这个选项默认即可

2、项目描述信息：

默认选填，不写就按提示就行

3、作者信息：

这个信息默认会自动拉取你git账号信息

4、运行环境选择：

不知道，选第一个，

当然第二个更好，更轻量更快速的运行

5、路由安装：

暂不安装处理

6、ES-Lint：

ES强制语法规范，选择是

7、Lint样式：

选择基础控制

8、单元测试

测试依赖于其他环境，所以不需要

9、e2e？

端到端测试，测试相关，不需要

10、使用NPM 安装依赖？

是的

2、CLI3的安装详细描述：

1、3基于webpack4开发而成

2、设计原则是0配置，移除了以往的配置文件和目录【build & config】

3、移除了static目录，更改为public目录，首页的模板文件放入public中

4、增加类型检测的原因，源码含有TS部分【TypeScript】

创建项目

vue create 01

弹出选择信息：

Vue CLI v4.5.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

prset意思配置，CLI3 提供了3种选择：

VUE2 默认 BABEL的ES规范转换和ES-Lint语法严格限制

VUE3 默认也是一样的，但是上面标注的是Vue3预览前瞻版本

第三种ManuallySelectFeatures 手动进行选择配置项

选择第三种进入手动配置之后，你需要自行选择，注意操作提示

这里去掉Linter就够了

PWA ProgressiveWebApp的概念

更高级的web应用，详细资料不多，仅当是参考：

https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

配置文件选项：

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

1、选择独立的配置文件

2、使用package.json

选择第一个对项目依赖进行单独配置

是否保存这些设置作为初始化项目的一个模板

没必要，否即可

RC后缀的意思：

Run Command (File)

CLI3初始化的项目目录结构：

public
    是CLI2的static目录，该目录下存放静态资源
    项目打包之后直接public目录的文件直接复制到dist目录中

src
    项目源代码

.browserslistrc
    浏览器配置相关

.gitignore
    git忽略文件

babel.config.js
    ES转换配置文件

运行项目的脚本变化：

{
  "name": "cli3-01",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

main.js的变化

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app');

演示中的代码则是：

import { createApp } from 'vue'
import App from './App.vue'

// createApp(App).mount('#app');

Vue.config.productionTip = false;

new Vue({
    render : h => h(App),
}).$mount('#app');

3、CLI2的安装详细描述：

项目配置相关
    build 
    config

项目依赖库的根目录
    node_modules

源码开发目录
    src

ES6转换配置文件
    .babelrc

项目文本编辑配置
    .editorconfig

CSS文件转换配置
    .postcssrc.js

首页模板文件
    index.html

项目描述信息文件
    package.json

版本锁定文件
    package.json

文档
    README.md

GIT忽略文件的配置文件
    .gitignore

查看package.json可以看到我们的一些脚本命令：

 {
  "name": "vue2cli_project_sample",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "Zeal4J",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    // 省略 。。。。
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

JS的运行只有在浏览器上，就是为了打破JS只能在浏览器上运行的限制，才出现了NodeJS

Node基于C++开发实现，引擎内核是Chrome的V8，执行JS代码效率高

通常的浏览器解析JS过曾，JS代码文件转换成字节码文件，再由字节码文件给浏览器解析渲染

但是ChromeV8直接跳过转换的步骤，直接编译二进制代码处理渲染。

现在执行JS文件的处理：

使用node运行JS文件即可

四、Compiler & Only

1、Vue程序运行过程：

Template组件
    |
Abstract Syntax Tree AST抽象语法树
    |
Render 函数渲染处理
    |
Virtual Dom 虚拟Dom
    |
Dom 真实Dom

2、Compiler 和 Only的区别

解释了上述的过程，就可以看出来

使用Runtime-Compiler就按照上面的完整步骤运行的

使用Runtime-Only的情况就跳过了AST直接进行渲染了

Compiler需要多出6KB的编译器，执行步骤多一个编译也就没有下面的Only快

3、函数的缩写：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // render: h => h(App)
  render : function (h) {
    return h(App);
  }
})

4、H函数的原称及用法：

CreateElement函数，默认用法就是直接传递组件对象：

  render : function (createElement) {
    return createElement(App);
  }
  // render : function (createElement) {
  //   return createElement('HTML元素', { HTML元素属性 : 值, ... }, ['HTML元素嵌入的文本值', ... ]);
  // }

除了组件以外，支持原始的HTML元素注入

样例：

  render : function (createElement) {
    return createElement('h3', { class : 'aaa' }, ['hello-vue', 'ssss']);
  }

另外createElement函数支持嵌套使用

如果HTML元素属性对象没有注入就没有属性处理

  render : function (createElement) {
    return createElement('h3', { class : 'aaa' }, ['hello-vue', createElement('button', ['按钮'])]);
  }

五、GUI：Vue Ui

这个命令安装Vue之后还有一个GUI的支持：

npm install @vue/cli -g

在之前的项目目录中打开终端执行此命令打开GUI项目管理器

vue ui

项目：
    GUI会展示已被注册的项目，
    当前展示为空是因为我们使用命令创建的项目没有在GUI中注册，
    可以通过第三个按钮导入进行注册

创建：
    使用GUI创建一个新项目

导入：
    把一个已经存在的项目导入到GUI中

GUI的方便之处是可以进行依赖和插件的搜索：

配置项的设置更为直观：

关于UI和配置的详细：

https://www.bilibili.com/video/BV15741177Eh?p=97