Vue - 6 - 腳手架 - vue cli（安裝、使用、目錄結構）、ESLint（自動匹配、關閉）

• 上一篇：《Vue - 5 - 模塊化 - commonJS、ES6-Modules、webpack、工程目錄、（處理：css、less、圖片、vue、搭建服務器）》

• 下一篇：《Vue - 7 - 路由 - vue-router》

• vuecli官網 - https://cli.vuejs.org/zh/

• vuecli 講解視頻 - https://www.bilibili.com/video/av89760569?p=92

• Vue 知識點彙總（下）–附案例代碼及項目地址 - https://blog.csdn.net/wuyxinu/article/details/103966175
  

Vue CLI

• 如果你只是簡單寫幾個Vue的Demo程序, 那麼你不需要Vue CLI.

• 如果你在開發大型項目, 那麼你需要, 並且必然需要使用Vue CLI

# 什麼是Vue CLI

使用Vue.js開發大型應用時，我們需要考慮代碼目錄結構、項目結構和部署、熱加載、代碼單元測試等事情。

如果每個項目都要手動完成這些工作，那無以效率比較低效，所以通常我們會使用一些腳手架工具來幫助完成這些事情。

Vue CLI 是一個官方發佈 vue.js 項目腳手架

使用 vue-cli 可以快速搭建 Vue 開發環境以及對應的 webpack 配置.

CLI是什麼意思?
.
CLI 是 Command-Line Interface , 翻譯爲命令行界面, 但是俗稱腳手架（下圖就是建築學上的腳手架）
.
用於預先搭建建築的模型

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

安裝 NodeJS
可以直接在官方網站中下載安裝.

• 網址: http://nodejs.cn/download/

檢測安裝的版本

默認情況下自動安裝 Node 和 NPM
Node 環境要求8.9以上或者更高版本

什麼是NPM呢?
.
NPM的全稱是Node Package Manager
是一個NodeJS包管理和分發工具，已經成爲了非官方的發佈Node模塊（包）的標準。
後續我們會經常使用NPM來安裝一些開發過程中依賴包.

cnpm安裝
.
由於國內直接使用 npm 的官方鏡像是非常慢的，這裏推薦使用 淘寶 NPM 鏡像。
.
你可以使用淘寶定製的 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` 的運行效果將會跟 `[email protected]` 相同
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
.
後期，我們選另外一個。

ESLint 是什麼？
.
lint 限制
ES Lint 對es的限制

.
對我們的代碼格式做規範 / 檢查

• Standard 標準
• Airbnb 愛比鄰 （國外一個訂酒店公司） 的規範
• none 自定義

Test?
.
我們就不測試了，這裏主要學開發。
.

最終生成的目錄（目錄結構下面講）

運行

done

# 目錄結構詳解

## package.json 文件

先看package.json

npm run build

通過 node 運行 build 目錄下 build.js 文件

node.js 是使用 C++ 、 V8引擎 開發的
能直接運行 js 代碼
.
而且和 普通瀏覽器運行 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 目錄

放靜態資源，編譯後會原封不動的複製到 dist 文件夾裏面

.gitkeep： git 的東西，git一般不會上傳空文件夾。加了這個文件後，儘管這個文件夾爲空，也會上傳

## src 目錄

我們寫代碼的地方

src/assets 目錄

也是放靜態資源的，但是和 static 不同，會根據資源的情況進行轉換。

如：

• 圖片（小於某個limit會編譯成base64放在代碼中，大於某個 limit 會被重命名放在發佈目錄裏）

## .babelrc

ES6 以上轉爲 ES5

## .editorconfig

代碼風格統一

如編碼、縮進、換行

• charset = utf-8 編碼格式
• indent_style = space 空格縮進
• indent_size = 2 縮進兩個空格
• end_of_line = lf lf形式換行
• insert_final_newline = true 文件尾加一個空行
  trim_trailing_whitespace = true 清除多餘空格

## .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的區別

區別“只在”main.js 裏面

看兩種模式的 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 （顯然，這個性能高，且源碼少（不需要template ⇒ ast的代碼 ））

現在，再看回創建項目時候的 說明就明白了

這裏說的 減少的 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配置”， 移除的配置文件根目錄下，build和 config 等目錄
  • vue-cli 3 提供了 vue ui 命令，提供了可視化配置， 更加人性化
  • 移除了 static 文件夾， 新增了 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 文件 ，把配置寫進去即可