六. Vue CLI詳解

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的模板。

2. Vue CLI2詳解

2.1 初始化設置

2.2 Runtime-Compiler和Runtime-only的區別

簡單總結

若是在以後的開發中你依然使用template，就須要選擇Runtime-Compiler。若是你以後的開發中使用的是.vue文件夾開發，那麼能夠選擇Runtime-only

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。咱們來看下面的一幅圖。

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 目錄結構

2.4 npm run build流程

2.5 npm run dev流程

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中

初始化

目錄結構

vue-cli 3的配置文件放哪裏去了？

注：在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')