六. Vue CLI詳解

MPolaris發表於2020-12-02
Vue

1. Vue CLI理解

1.1 什麼是Vue CLI

如果你只是簡單寫幾個Vue的Demo程式, 那麼你不需要Vue CLI，如果你在開發大型專案那麼你需要它, 並且必然需要使用Vue CLI。

使用Vue.js開發大型應用時我們需要考慮程式碼目錄結構、專案結構和部署、熱載入、程式碼單元測試等事情。如果每個專案都要手動完成這些工作那無以效率比較低效，所以通常我們會使用一些腳手架工具來幫助完成這些事情。

CLI是什麼意思？Command-Line Interface，翻譯為命令列介面，但是俗稱腳手架。Vue CLI是一個官方釋出 Vue.js 專案腳手架，使用它可以快速搭建Vue開發環境以及對應的webpack配置。

1.2 Vue CLI使用前提 - Node & Webpack

安裝Node.js

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

Node環境要求8.9以上或者更高版本

NPM

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

CNPM安裝

由於國內直接使用 npm 的官方映象是非常慢的，這裡推薦使用淘寶 NPM 映象。你可以使用淘寶定製的 cnpm (gzip 壓縮支援) 命令列工具代替預設的 npm:

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

這樣就可以使用 cnpm 命令來安裝模組了

cnpm install [name]

Webpack

Vue.js官方腳手架工具就使用了webpack模板。webpack對所有的資源會壓縮等優化操作，它在開發過程中提供了一套完整的功能，能夠使得我們開發過程中變得高效。

Webpack的全域性安裝

npm install webpack -g
1.3 安裝Vue腳手架
//Vue CLI2
npm install -g vue-cli
//Vue ClI3
npm install -g @vue/cli
1.4 初始化專案
//Vue CLI2
vue init webpack my-project
//Vue CLI3
vue create my-project

注：當我們安裝了Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化專案時不可以的。可以使用如下方式在安裝Vue CLI3的基礎上拉取2.x的模板。

image-20201201105849864

2. Vue CLI2詳解

2.1 初始化設定
image-20201201112601023
2.2 Runtime-Compiler和Runtime-only的區別

簡單總結

如果在之後的開發中你依然使用template，就需要選擇Runtime-Compiler。如果你之後的開發中使用的是.vue資料夾開發，那麼可以選擇Runtime-only

image-20201201114220515

render和template

使用Runtime-Compiler模式時

new Vue({
	el: '#app',
	components: { App },
	template: '<App/>'
})

使用Runtime-only模式時

new Vue({
	el: '#app',
	render: h => h(App)
})

為什麼會出現這樣的差異呢？我們需要先理解Vue應用程式是如何執行起來的，Vue中的模板如何最終渲染成真實DOM。我們來看下面的一幅圖。

img01

render函式的使用

//元件物件
const cpn = {
    template: '<div>{{message}},我是cpn元件</div>',
    data() {
        return {
			message:'hello'
        }
    }
}

//這裡傳來的實參名字叫createElement，而模板生成使用形參h去接收，為什麼要取名h？
new Vue({
    el: '#app',
    render: (createElement) => {
        //1.使用方式一:我們這裡建立出來的element就會替換#app元素 
//      return createElement('標籤','相關資料物件（可以不傳），即標籤的屬性',['內容陣列']);
        
        //1.1 render函式基本使用
//      return createElement('div',{class: 'box'},['polaris']);
        
        //1.2 巢狀render函式
//      return createElement('div',{class: 'box'},[
//          'polaris',createElement('h2',['我是標題啊'])
//      ]);
        
        //1.3 傳入一個元件物件,注意這裡的cpn元件需要template編譯器
        return createElement(cpn);
    }
})

注意：vue-template-compiler會把.vue檔案中的template轉化成render函式，不需要使用template編譯器了。(vue-template-compiler是什麼請回看 Webpack詳解)

2.3 目錄結構
image-20201201114034547
2.4 npm run build流程
img02
2.5 npm run dev流程
img03
2.6 修改配置：webpack.base.conf.js起別名
resolve: {
	extensions: ['.js','.vue','.json'],
	alias: {
		'@': resolve('src'),
		'pages': resolve('src/pages'),
		'common': resolve('src/common'),
		'components': resolve('src/components'),
		'network': resolve('src/network'),
	}
}

3. Vue CLI3詳解

vue-cli 3 與 2 版本有很大區別

  • vue-cli 3 是基於 webpack 4 打造，vue-cli 2 還是 webapck 3
  • vue-cli 3 的設計原則是“ 0配置”，移除了配置檔案根目錄下的build和config等目錄
  • vue-cli 3 提供了 vue ui 命令，提供了視覺化配置，更加人性化
  • 移除了static資料夾，新增了public資料夾，並且index.html移動到public中

初始化

image-20201202012545807

目錄結構

image-20201201215909247

vue-cli 3的配置檔案放哪裡去了？

image-20201201220251780

注：在vue-cli3如果我們要修改配置，有三種方式

① 啟動配置伺服器: vue ui命令

② 在專案根目錄下建立一個 vue.config.js檔案，寫的配置會和預設配置合併作為webpack配置。

③ 隱藏起來的配置：node_nodules/@vue/cli-service/lib/webpack.config.js

main.js理解

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

//生產階段列印的一些提示資訊，在開發階段一般不需要即設為false
Vue.config.productionTip = false

//兩種不同的寫法異同 ↓
new Vue({
    //el與下面的.$mount('#app')沒有區別
    //vue底層只是多了一行程式碼，即如果配置了el則獲取el的值去執行.$mount('得到的值')
    //即不管有沒有el，最終都會執行.$mount('xx')
    el: '#app'
    render: function(h) {
        return h(App)
    }
})

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

相關文章