vue-cli 開發（vue 開發筆記）

時間 2019-11-13

標籤 vue cli 開發筆記简体版

原文原文鏈接

vue-cli學習資料：php

http://m.php.cn/article/394750.html 或css

http://www.javashuo.com/article/p-exmcbynj-bt.htmlhtml

vue-cli 實踐案例： https://blog.csdn.net/yuanyuanispeak/article/details/73530523前端

一、組件的data必須是函數： vue官網規定的、vue

二、es6拓展的對象功能：經過省略冒號與 function 關鍵字，將這個語法變得更簡潔。node

　　a、對象鍵值對的值必須是變量名且和鍵名相同纔可使用這種簡寫。react

　　b、函數均可以，由於對象中的函數要麼是函數名，要麼是匿名函數。jquery

import FooterNav from '../../components/footer.vue'

export default {
    components:{
        FooterNav
    }
}

三、import OO from XX 參考： http://m.php.cn/article/394750.htmlwebpack

　　a、import至關於var、let去聲明一個變量OO（自定義，解構賦值均可以）ios

　　b、from：引入哪一個文件

　　　　.若是是本身定義的文件，必定要寫相對路徑‘./' （若是是用的本身配置的路徑別名，就只能看build目錄下的配置文件了。參考：http://www.javashuo.com/article/p-vpxufrwk-hc.html）
　　　　.若是引入node——modules下的文件不須要寫

　　import 變量 from ‘模塊路徑
　　c、此時OO返回一個對象

　　d、Vue中import from的來源： http://www.javashuo.com/article/p-pyenquzg-mp.html （ import後面的路徑指向）

　　4.若是但願對象中有內容，須要XX先暴露出對象，這樣OO才能接收到並在當前文件使用。根據暴露對象的格式，決定接手變量的格式

export default {
    components:{
        FooterNav
    }
}

四、父組件傳值到子組件： http://www.javashuo.com/article/p-xhqyxikg-ee.html 或 https://www.jianshu.com/p/91416e11f012 （$ref 方法能夠實現，可是不推薦）

　父組件要把值傳遞給子組件，只能在使用子組件時，做爲標籤（自定義的組件標籤）屬性傳遞過去。

// 父組件
<template>
    <div>
        <child message="hello"></child>   //  這裏的屬性值一樣可使用vue的數據動態綁定，v-bind：message 或 ：message
    </div>
</template>
<script>
import child from '../../components/footer.vue'
export default {
    components:{
        child
    }
}
</script>

　　子組件使用父組件傳遞過來的值必須使用 props去接收傳來的數據。

// footer.vue 子組件
<template>
    <div class="footer fixed">
            <div>{{ message }}</div>
    </div>
</template>
<script>
export default {
    props:['message']
}
</script>

五、子組件傳值到父組件：

　　a、在子組件中建立一個按鈕，給按鈕綁定一個點擊事件

　　b、在響應該點擊事件的函數中使用$emit來觸發一個自定義事件，並傳遞一個參數

　　c、在父組件中對應子組件標籤中綁定監聽該自定義事件，並添加一個響應該事件的處理方法。（注意，必須在對應的子組件標籤上綁定自定義的事件纔有效）

　參考： http://www.javashuo.com/article/p-xhqyxikg-ee.html

六、動態組件： http://www.javashuo.com/article/p-xttgfdix-bs.html

<component :is="currentView"></component>

七、Vue2.0經過二級路由 (嵌套路由) 實現頁面切換： https://blog.csdn.net/Fabulous1111/article/details/78859203 或 http://www.php.cn/js-tutorial-401363.html

　二級路由相對於普通路由是解決什麼問題的呢？

　　注意：子路由是嵌套路由，二級路由只能嵌套在一級路由中使用。

八、vue插件全局都用（toastc插件示例）：https://www.jb51.net/article/121120.htm 或 https://blog.csdn.net/qq_34802010/article/details/81668692（推薦，親測有效）

感悟：vue組件：在使用的地方要引入這個vue 文件。 vue 插件：顯示的ui放在一個vue文件中，vue插件須要一個js文件進行使用處理的。main.js只要加載這個js文件。

九、<router-view> 組件的做用：https://blog.csdn.net/webbingandkami/article/details/79331405

　說明：router-view 組件的做用就是將每一個路徑映射到對應的組件（vue.js 教程的pdf文件中對vue-router 的做用就是這樣介紹的）

　體會：我的理解，就是解析地址欄上的 url，將對應的組件放在 router-view 上渲染（這裏多個router-view組件，就會多個進行渲染）。

　　　　利用這個特性，能夠控制須要 keep-alive 的組件進行，區別放在router-view 中。（github中的 vue2-elm項目就是這麼處理的）

十、路由配置中 meta字段（元數據）的做用：https://www.jianshu.com/p/33c9e7454028 或 http://m.hangge.com/news/cache/detail_2130.html

　　簡單理解，就是給對應的路由添加一些信息（狀態），對應這個url地址的頁面，能夠是獲取到這些信息的（狀態）。

{
  path: '/msite',
  component: msite,
  meta: { keepAlive: true },
},

<router-view v-if="$route.meta.keepAlive"></router-view> <!-- 頁面中獲取路由 meta中keepAlive字段的信息 -->

十一、vue的組件、自定義事件名的命名規範： http://www.javashuo.com/article/p-qcdmlalc-mz.html(組件名) 或 https://blog.csdn.net/zgpeterliu/article/details/80363445

　　留言：目前單文件的組件中沒有出現過由於沒有嚴格按照命名規範出現的問題。暫時無論這個。

十二、v-for循環列表中，還有一種 v-for="n in 10" 的循環用法。 n 由原來的 0 ～ 9 迭代變成 1 ～ 10 迭代。

1三、vue數據操做DOM，數據的變化不會立刻引發DOM的變化。因此須要DOM渲染出來後，再操做的DOM的邏輯，要放到 this.$nextTick()回調中執行。https://cn.vuejs.org/v2/api/#vm-nextTick 以下：

<img v-if="voiceCancel" src="./img/voice.png" alt="" ref="voiceImg">    <!-- voiceCancel起始爲false -->
<button @click="voiceSerch">點擊</button>

    voiceSerch(){
      this.voiceCancel = true  // voiceCancel 初始爲false
      console.log(this.$refs.voiceImg);  // undefinde，這裏雖然 voiceCancel爲true了，可是html尚未渲染出來，因此是獲取不到這個dom對象的
    }

這裏獲取 img 的DOM對象要放到 this.$nextTick()回調中，即

    voiceSerch(){
      this.voiceCancel = true  
      this.$nextTick(function(){
      console.log(this.$refs.voiceImg);  // 這裏DOM已經渲染好了，因此能夠獲取到 img 對象
      });
    }

一、後綴名爲vue的文件的開發： https://www.jb51.net/article/123994.htm

二、路由步驟：（注意路由中的組件和重複使用的組件的區別）

　　a、組件頁面開發好

　　b、將這個組件配置到路由表中 src/router/index.js；先引入 import。。。；再放入路由表中。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test from '@/components/test'

 Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld   
    },
    {
      path: '/test',    // 這個值決定訪問該頁面時url後面的hash值。如 ： http://localhost:8080/#/test
      name: 'test',　　　　//
      component: test   // 這個值是引入文件的變量即 import 後面的變量名

} ] })

三、路由與頁面間導航： https://www.jianshu.com/p/bc923ec4d28b

　　a、<router-link :to="{ name : 'explorer' }"> 和 <router-link :to="/explorer"> 的區別是前一個是以路由的name做爲參數，後一個是以path屬性做爲參數。

　　b、動態路由：（須要好好研究下）

四、vue同級能夠有多個router-view視圖： https://blog.csdn.net/qq_34664239/article/details/79639459

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

三、Vue.js中使用require，import ： https://blog.csdn.net/Deft_MKJing/article/details/80388770

　說明：目前全部的引擎都尚未實現import，node中使用babel支持ES6，也僅僅是將ES6轉碼爲ES5再執行，import 語法會被轉碼爲require。因此目前來講import和require引入的結果是同樣的。

　　　　可是，import可使用解構的方法導入，且只能在文件頭部使用，而require能夠在任何地方使用。

三、vue-cli 中組件的使用（兩種方式）：

　　a、在main.js文件中進行全局註冊，在須要使用這個組件的地方，組件使用這個組件的標籤就能夠了。注： Switch.name 應該是這個組件默認的標籤名，能夠設置成自定義的標籤名。

// main.js 文件
import { Switch } from 'mint-ui';

Vue.component(Switch.name, Switch);

　　b、main.js 中不動，直接在須要使用的地方，引入這個組件，在 components 選項中注入這個組件。

//  須要使用這個組件的 .vue文件中
import { Switch } from 'mint-ui'

export default { 
    name: 'order',
    components: {
        mtSwitch: Switch
    }
}

四、組件傳值，參考上面的講解

五、vue-cli 中 webpack的代理使用： http://www.javashuo.com/article/p-rmofthbt-bv.html 或 https://www.jb51.net/article/130509.htm （推薦）或 http://www.javashuo.com/article/p-robgdfsg-ch.html

proxyTable選項是一個代理表（明確 代理服務器是後端的程序，修改 須要重啓程序）。前端有理由表，後端有也有理由表，代理也有路由表（即代理表）。

路由表上的地址都是不寫域名和端口的，通常服務器會自動把他們加上去的（嚴格的說也不是添加上去，前端中，訪問這個網頁，既然可以訪問這個網頁，天然域名端口是有的，後端也是同樣。代理服務器更是這樣，既然可以訪問代理服務器，這個域名端口天然也是有的）。

  proxyTable: {
    '/api': {     // 只要在接口中看到 ‘/api‘ 會自動變成咱們設置的地址（我的以爲，這裏應該是做爲匹配請求的地址參數）  (理解：應該是自動把前面的協議、域名、端口（即host）替換成咱們設置的目標host，下面有一個重寫 關鍵字 的選項)
      target: 'http://localhost:3000',  （這裏是代理接口的位置）
      changeOrigin: true,（容許跨域，若是這不寫，調用接口接口時會有跨域錯誤說缺乏請求頭）
      pathRewrite: {
        '^/api': ''  // 由於在 ajax 的 url 中加了前綴 '/api'，而本來的接口是沒有這個前綴的,因此須要經過 pathRewrite 來重寫地址，將前綴 '/api' 轉爲 '/'或''
      }   
    }
  }

　// (我的)注意：上面的看到 ‘/api‘ 會自動變成咱們設置的地址，這個api是絕對路徑，服務器地址端口/api（如:http://localhost:9090/api，這點全部的教程裏都沒有明確的說出來）。
　　　　　　　　　即將 http://localhost:9090/api 變成 http://localhost:3000/api。這裏只是將域名端口替換。下面的重寫選項，將api再去掉，而後發送請求接口。

npm run dev啓動webpack時，命令行中會把對應的代理對應關係顯示出來

六、proxy的代理、抓包：https://blog.csdn.net/a0405221/article/details/85234149 或 http://www.javashuo.com/article/p-uekyinqo-db.html（onProxyReq 請求發送前觸發的事件；onProxyRes 請求響應後觸發的事件）

　爲何使用這個： webpack是沒有日誌的，代理某個API接口時，若是調用失敗（postman上調用目標接口是有效的）。則沒法確認代理後請求的目標地址url是否是正確的，很難排除錯誤緣由。

　可是經過 onProxyRes 事件就能夠知道，當前 ajax請求有沒有觸發這個代理請求，若是觸發了代理請求，能夠知道代理後目標服務器的url和請求參數；若是沒有觸發請求這個代理請求，要麼是沒有匹配到代理的字段，要麼是被其餘的代理字段先匹配到了，

　　好比兩個匹配字段 "/api" 和 "/apireq"，若是代理的字段是apireq，則會被api這個字段給代理了，觸發了 "/api" 的代理事件，但沒有觸發"/apireq"的代理事件。(親測有效)

 proxyTable: {
      '/api1': {
        target: 'https://test.iconntech.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api1': '/'
        },
        onProxyReq: function(onProxyReq, req, res) { // req和res分別是Express框架封裝的Request對象和Response對象

          console.log('代理字段', '/api1');
          console.log('前端請求url', onProxyReq._headers.origin + req.originalUrl);  // 這裏的輸出是本身配的，僅作參考
          console.log('目標請求url1', onProxyReq.agent.protocol +"//" + onProxyReq._headers.host + req.url); // 代理配置的target只有host，沒有後面的目錄
          console.log('目標請求url2', onProxyReq.agent.protocol +"//" + onProxyReq._headers.host + onProxyReq.path); // 代理配置的target,有二級目錄
        },
        onProxyRes: function(){
          console.log('2');
        }
      }
    }

七、對組件的擴展 —插槽 slot ： https://blog.csdn.net/zhouzuoluo/article/details/80536754

通俗理解：是「佔坑」，在組件模板中佔好了位置，當使用該組件標籤時候，組件標籤裏面的內容就會自動填坑

八、vue中的ref做用：能夠實現DOM的聯動操做

　　a、ref 加在普通的元素上，用this.$refs.name 獲取到的是dom元素 ,減小獲取dom節點的消耗參考： http://www.javashuo.com/article/p-aknbdnxw-gr.html

　　b、ref 加在子組件上，用this.ref.name 獲取到的是組件實例，可使用組件的全部方法參考： http://www.javashuo.com/article/p-nbgfgewl-cn.html

九、Vue.use ： https://www.jianshu.com/p/89a05706917a

十、vue插件：(如 vue-touch) https://cn.vuejs.org/v2/guide/plugins.html

　　a、開發插件： Vue.js 的插件應當有一個公開方法 install

　　b、使用插件：經過全局方法 Vue.use() 使用插件

注：Vue.js 官方提供的一些插件 (例如 vue-router) 在檢測到 Vue 是可訪問的全局變量時會自動調用 Vue.use()。這樣的插件就不用使用Vue.use()了。

十一、使用 vue-cli + axios 配置代理進行跨域訪問數據： http://www.javashuo.com/article/p-zhyjhxvs-nd.html

　　注意：在vue-cli 中使用 axios，用多中方法，很差的使用方法會帶來維護修改的麻煩。推薦使用連接中的第三種方法 http://www.javashuo.com/article/p-vevvysqw-cr.html

　　　即把調 api接口的js都寫在一個API文件夾中的js文件中。

十二、vue實例中template: '<App/>',這樣寫是什麼意思： https://segmentfault.com/q/1010000008863503

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'    //  template 的內容會替換 el 選項中對應的標籤的。 能夠參考 vue官網 https://cn.vuejs.org/v2/api/#template

})

1三、import { render } 和 import ReactDOM有何區別： https://segmentfault.com/q/1010000011795996

import ReactDOM from 'react-dom';
ReactDOM.render()                   // 這種方法是整個都引進來了

import { render } from 'react-dom'
render()                           // 這種方法是隻引進一個方法，而後解構使用

　　使用ES6模塊化的import特性時，如何正確使用花括號'{ }' ： https://www.jianshu.com/p/8c91d6cb59e8

1四、vue-router懶加載： https://blog.csdn.net/wp_boom/article/details/78799237

1五、vue-cli 構建的項目中如何使用 Less ： https://blog.csdn.net/zmhawk/article/details/75209161 或 vue-cli構建項目使用 less

　　說明：是用哪一個vue-cli搭建的環境，不須要配置，把兩個npm包安裝好，就能夠直接使用了。

1六、eslint語法規範： http://www.cnblogs.com/mingjian/p/9361027.html

1七、Vue中的computed屬性： http://www.javashuo.com/article/p-yhhnpwxj-cu.html

1八、<router-link :to=" " replace></router-link>

　　a、 replace的做用： http://www.javashuo.com/article/p-thhvvskm-gx.html

1八、vue eslint開發關掉 tab錯誤提示： https://blog.csdn.net/aimee1608/article/details/81045362 （親測有效）

20、ES6 Promise 用法： http://www.javashuo.com/article/p-dzadmxti-md.html 或

　　https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise （這裏有代碼演示）

　　a、Promise.resolve(value) 把value值解析成 Promise對象返回，而這個value值做爲這個Promise對象回調函數的參數傳入

var promise1 = Promise.resolve([1, 2, 3]);

promise1.then(function(value) {
  console.log(value);     // 輸出 Array [1, 2, 3]
});

2一、爲何要使用 vuex ： https://blog.csdn.net/chjj0904/article/details/78753153

　　我的理解： vuex 就像一個本地存儲，主要是解決組件通訊比較複雜時的問題，好比多層組件數據傳遞，不用vuex則必須一級一級的傳遞過去比較麻煩。

　　親測：vuex 的功能有點像緩存（本地存儲），可是vuex的存儲很是容易管理，很是容易修改和設置。

2二、vue 中使用scoped關鍵字後樣式不能修改第三方組件問題：

　　緣由： https://www.jb51.net/article/143272.htm

　　解決方案： http://www.javashuo.com/article/p-bxulqqlx-da.html

　　　推薦解決方案：

.gHeader /deep/ .name{ //第一種寫法
    color:red;
  }

緣由分析： style標籤中添加了scopde 屬性後，vue-loader編譯vue文件時：

　　編譯 template 時會給每個標籤加上相同的自定義屬性 data-* ；

　　編譯 style 會給每個選擇器（總體的一個）的後面加上這個屬性 elm[data-*] ；

　　可是第三方組件中的標籤是不會添加這個自定義屬性 data-* 的，因此編譯後的這個選擇器 elm[data-*]，在第三方的組件中找不到這樣的標籤。

上面推薦解決方案的原理：

　　就是把選擇器後面的屬性去掉，放到第一基本選擇器上。以下面這樣

.gHeader[data-*] .name

2三、vue組件的is特性： http://www.javashuo.com/article/p-ujgsbgbe-dh.html

　　做用：由於vue模板就是dom模板，使用的是瀏覽器原生的解析器進行解析，因此dom模板的限制也就成爲vue模板的限制了。

　　如：ul 標籤中放入非li標籤，就會被瀏覽器踢出去（瀏覽器的容錯機制），這樣咱們在ul裏面放入組件標籤（組件標籤名確定不會是li）就會被踢出去。

　　　　使用is屬性就是爲了解決瀏覽器容錯機制致使的組件標籤無效的問題。

　　原理（我的理解）： is屬性所在的標籤名，只是一個臨時佔位標籤，正在使用的是is指向的組件名。如：下面的li只是佔個位置，正在的渲染後的內容仍是v-li組件。參考： https://blog.csdn.net/zhumengzj/article/details/79300784 （往下面瀏覽）

<ul>
    <li is="v-li"></li>
</ul>

　這個 is 特性的做用一樣起到了動態組件的效果： http://www.javashuo.com/article/p-swwjznwd-na.html

2四、vue的路由傳參： http://www.javashuo.com/article/p-tbkpfuwh-go.html

2五、vue-cli 打包( npm run build )的文件（dist目錄裏的文件），默認打包後只能在網站根目錄下運行。若是要讓它在非根目錄下運行，

　　須要在config文件夾下的index.js中build選項的assetsPublicPath 配置下（親測有效）。 https://segmentfault.com/q/1010000007881269?_ea=1481207

　　或 http://www.cnblogs.com/xueweijie/p/6971146.html （vue-cli 如何打包上線）

2六、vue webpack打包後 .css文件裏面的背景圖片路徑錯誤解決方法：http://www.javashuo.com/article/p-wzzdiiij-dp.html

2七、VUE配置 ip地址訪問：

　　方法一、2：

　　https://segmentfault.com/q/1010000014797068（localhost和IP地址均可以使用,可是啓動的是0.0.0.0地址訪問的，須要本身在地址欄從新輸入有效的域名或IP地址）或

　　方法 3 ：（推薦這個，IP地址能夠是動態變化的）

　　https://blog.csdn.net/m0_37036014/article/details/79639788 （缺點就是 localhost訪問無效，可是在ip能夠的時候，localhost根本不須要使用，因此不影響）

2八、vue-cli按需加載，懶加載組件：http://www.javashuo.com/article/p-ekxcvoip-dr.html

2九、vuejs項目性能優化總結：https://www.jianshu.com/p/41075f1f5297

30、VUE路由去除#問題： http://www.javashuo.com/article/p-kslzqjrh-ed.html

3一、vue-cli 中 img 圖片動態改變：https://blog.csdn.net/qq_33744228/article/details/81319485

　　vue-cli中js 動態改變img標籤的src 屬性值，並不能使這個圖片打包進入編譯後的文件中。由於webpack只是把這個src值做爲字符串處理了，而不是模塊依賴文件。

　　要使用這個動態圖片，須要把這個圖片經過模塊依賴關係，加載進來

this.leftImg = require('../../assets/img/iconApply.png')

　　另：img標籤中src第一次的加載進來的文件是有模塊依賴關係的，會被打包進去。以後src改變，只是將對應的src值放進去，而不會將對應的文件打包進去。

3二、項目下的 static 文件夾的文件，不會被Webpack處理，會直接被複制到最終的打包目錄（默認是dist/static）下。 https://blog.csdn.net/z767327552/article/details/79533792

3三、vue-cli中接口的地址，開發時，使用的是代理的地址，打包後是使用實際的地址。配置以下。

// 配置地址
export const SMQB_BASE_URL = process.env.NODE_ENV === 'development' ? '/api1/' : 'http://10.100.13.202:9107/'

3四、vue 路由守衛：http://www.javashuo.com/article/p-ziahhjmu-eh.html

　　路由的改變或首次進入就會執行裏面的函數，調用next()方法，頁面纔會跳到對應路由的頁面進去。

// 全局路由守衛
router.beforeEach((to, from, next) => {
  console.log('守衛')
  next() // 必須使用 next ,執行效果依賴 next 方法的調用參數
})

es6 關聯知識：

一、export用於對外輸出本模塊（一個文件能夠理解爲一個模塊）變量的接口

　 import用於在一個模塊中加載另外一個含有export接口的模塊。

參考： http://www.javashuo.com/article/p-pjzwxlya-em.html

二、npm run dev 自動打開瀏覽器： http://www.javashuo.com/article/p-wdmsyetv-eo.html

修改配置：

config - index.js - autoOpenBrowser: true

三、使用組件時注意，再html中使用的組件名，再js中組件名必須駝峯命名法。參考：（vue-cli練習案例） https://blog.csdn.net/yuanyuanispeak/article/details/73530523 或

　　　　　　　　　　　　　　　　 https://github.com/hyy1115/vue2-web （redme.md中有教程，這個是用webpack本身搭建的開發環境）

四、mock.js 實現假數據 http://mockjs.com/ 或 http://www.javashuo.com/article/p-scfiwdwr-er.html 或 http://www.javashuo.com/article/p-qgzgahlf-es.html （推薦，非框架中使用，親測可行）

　　注意：mockjs再html文件（即傳統的js開發）中也是可使用的。

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./mock.js"></script>
    <script>
        var arr = ['momo', 'yanzi', 'ziwei']
        var obj = {
            'host': 'www.baidu',
            'port': '12345',
            'node': 'selector'
        }
        Mock.mock('http://www.bai.com', obj)

        $.ajax({
            url: 'http://www.bai.com',
            dataType: 'json',
            success: function (e) {
                console.log(e)
            }
        })
    </script>
</body>
</html>