一、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-Learn\CodeWhy\10-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-Learn\CodeWhy\10-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', ['按鈕'])]);
  }