vue 學習

安裝

  需安裝node、webpack、vue-cli。
  檢查node的安裝狀況，node -v。
  檢查npm的安裝狀況，npm -v。

  windows下更新node找了不少資料，最後看到說是覆蓋安裝msi文件（不太懂這個和從新安裝有什麼區別）。

  安裝webpack4和以前的版本不太同樣，先是npm install webpack -g。若是是本身配置，還須要安裝npm install webpack-cli -g，(好像能夠不用安裝webpack，安裝vue-cli時自帶,沒試過)。
而後安裝npm install vue-cli -g，這裏查看版本是vue -V(V大寫)。

cnpm替換npm

  npm 服務器是放在國外的，有時候會很慢，國內可使用淘寶鏡像 cnpm。
  安裝淘寶鏡像，npm install -g cnpm --registry=http://registry.npm.taobao.org，驗證是否安裝成功，cnpm -v。
  還能夠修改npm的指向地址，npm config set registry https://registry.npm.taobao.org

npm install報錯，解決辦法：

  有的時候咱們git他人的項目，可是執行下載全部依賴npm install後啓動npm run dev運行的最後一步常常會報錯，不是缺乏依賴模板，就是node_modules版本與本機安裝的node和npm版本不一致。這時解決的方法就是直接刪除vue項目中的node_modules，同時修改package.json文件裏面的node和npm版本號，同電腦一致，而後執行npm install從新下載全部依賴，最後執行npm run dev就能成功運行項目了。

刪除node_modules文件：

　npm install rimraf -g
　rimraf node_modules

搭建項目

• vue init webpack projectname建立項目
• cd projectname進入項目文件夾
• npm install安裝項目依賴，這個命令能夠執行是因爲，定位到工程文件的前提下，目錄下有一個package.json文件，裏面配置了依賴所需；
• 安裝vue路由模塊vue-router和網絡請求模塊vue-resource，npm install vue-router vue-resource --save。
    搭建完成以後會產生一個文件夾，以下：
  
• config是構建配置目錄，裏面的index.js第17行代碼能夠設置端口port，咱們的8080端口可能佔用，能夠在這修改。
• 上圖中的index.html就是入口頁面，也能夠叫容器，裏面有個id爲app的div。
• src就是咱們寫代碼的地方，源代碼目錄。
• src中的main.js就是入口 js 文件，也叫邏輯入口；
• src中的App.vue至關因而主組件，全部的組件都將在它裏面組合。這裏有個有趣的地方，它裏面也有個i爲app的div。但卻不會和index.html裏的同id的div衝突。
• main.js會調用主組件App.vue和路由，並建立一個Vue實例，關聯到index.html裏的div上，最個div被替換成App.vue的div替換。至於如何替換的，就不太清楚了。

安裝各類依賴

npm install xxx xxx --save -dev

• --save是指咱們在生產環境下安裝的各類依賴，在package.json中就是dependencies。
• -dev是開發環境下的依賴，在package.json中就是devDependencies。
  
  
    npm 安裝package.json中的模塊依賴分爲兩種狀況：
• package.json不存在時: 命令:npm init可自動建立package.json文件。
• package.json存在時: 直接命令:npm install或者npm install –save-dev會自動將package.json中的模塊安裝到node-modules文件夾下。

指令

指令	描述
v-once	數據不更新，初次數據就是永久數據
v-if	判斷是否渲染元素，元素在顯示和銷燬之間切換，適用於不常常改變的場景
v-show	判斷是否展現元素，元素在顯示和隱藏之間切換
v-else v-else-if	必須和v-if結合使用，而且語句必須先後連在一塊兒
v-for	優先級比v-if高，(item,index) in arr/str/num
v-text / v-html
v-bind	動態綁定屬性、樣式、類等，簡寫直接:
v-on	綁定事件，簡寫@，中止冒泡@click.stop=，阻止默認事件@click.prevent=，串聯寫法@click.stop.prevent=

Class 與 Style 綁定

  當有多個條件class時這樣寫有些繁瑣。因此在數組語法中也可使用對象語法。

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

條件渲染

  v-if元素必須緊跟在帶v-if或者v-else-if的元素的後面，不然它將不會被識別。
  Vue爲你提供了一種方式來表達「這兩個元素是徹底獨立的，不要複用它們」。只需添加一個具備惟一值的key屬性便可。　
  v-if是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。v-if也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。
  相比之下，v-show就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於CSS進行切換。
  通常來講，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用v-show較好；若是在運行時條件不多改變，則使用v-if較好。
  當它們處於同一節點，v-for的優先級比v-if更高，這意味着v-if將分別重複運行於每一個v-for循環中。

事件處理

  有時候，你可能想在某個組件的根元素上監聽一個原生事件。可使用v-on的修飾符.native。

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此到處理，而後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

<!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的狀況 -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<my-component v-on:click.native="doSomeThing"></my-component>

鍵盤事件及修飾符

• @click.once = " ", 只有第一次點擊有效。
• @keyup.enter = " ", 輸入完成而且按下回車，纔會觸發。
• @keyup.alt.enter = " ", 輸入完成而且同時按下回車和alt鍵，纔會觸發。

實例對象的數據選項

data

  data是Vue實例的數據對象。Vue將會遞歸將data的屬性轉換爲getter/setter，從而讓data屬性能響應數據變化。
  [注意]不該該對data屬性使用箭頭函數。
  Vue實例建立以後，能夠經過vm.$data訪問原始數據對象。
  Vue實例也代理了data對象上全部的屬性。可是，以_或$開頭的屬性不會被Vue實例代理，由於它們可能和Vue內置的屬性或方法衝突。可使用例如vm.$data._property的方式訪問這些屬性。
  構造Vue實例時傳入的各類選項大多數均可以在組件裏使用。只有一個例外：data必須是函數。

Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  }
})

computed

  計算屬性computed，實時觸發，默認只有getter方法，有須要時能夠加setter方法。計算結果會緩存，下次直接調用緩存，計算屬性只有在它的相關依賴發生改變時(虛擬DOM和真實DOM不一樣時)纔會從新求值，是同步的，須要return出來。

method

  對於最終的結果，computed和method兩種方式是相同的。
  然而，不一樣的是computed是基於它們的依賴進行緩存的，computed只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要data尚未發生改變，屢次訪問computed會當即返回以前的計算結果，而沒必要再次執行函數。
  相比而言，只要發生從新渲染method調用總會從新執行該函數。
  若是不但願有緩存，則用method替代。

watch

  Vue提供了一種通用的方式來觀察和響應Vue實例上的數據變更：watch屬性。watch屬性是一個對象，鍵是須要觀察的表達式，值是對應回調函數，回調函數獲得的參數爲新值和舊值。值也能夠是方法名，或者包含選項的對象。Vue實例將會在實例化時調用$watch，遍歷watch對象的每個屬性。
  除了使用數據選項中的watch方法之外，還可使用實例對象的$watch方法， 該方法的返回值是一個取消觀察函數，用來中止觸發回調。
  當數據須要隨着其它數據變更而變更時，咱們應該避免濫用watch屬性，使用computed計算屬性也可達到相同的目的。

組件

  組件分爲全局組件和局部組件，全局組件在全部實例中均可使用，局部組件僅可在註冊的實例中使用
  組件的建立和使用分爲三步：建立組件構造器、註冊組件、掛載做用域下實例化

建立構造器

let Profile = Vue.extend({
      templete:~
          <div>   </div>
      ~
  })

註冊全局組件

//Vue.component("組件自定義名稱"，"構造器名稱")
  Vue.component("my-div","Profile");

實例化調用

  組件的建立和使用可簡化在一塊兒，建立構造器和註冊組件可寫到一塊兒，

Vue.component("my-div",{
      templete:~
          <div> </div>
      ~ 
  })

template 和 script 寫模板

  用template寫模板，能夠像標籤同樣更直觀，用id來和組件對應

<template id="my-template-div">
      <div>  </div>
  </template>

  註冊組件時把id對應

Vue.component("my-div",{
      template:"#my-template-div"
  })

  也能夠用script寫模板，須要指定類型，註冊時同樣的用id對應，

<script type="text/template" id="my-tempalte-div">
      <div></div> 
  </script>

  項目中用template更多，更直觀
  組件中的 data 屬性，必須是函數

Vue.component("my-parent",{
　　　//組件中data屬性，必須是函數的形式傳遞的
      data(){
          return{
          
          }
      }
      template:"#parent" 
  })

組件通訊

子組件獲取父組件

  經過props傳遞，在子組件實例時使用props數組，顯式的聲明須要的參數(字符串形式)；在子組件調用的時候，經過動態綁定的形式得到數據。組件中能夠傳值，也能夠傳引用，還能夠傳父組件。傳值以後，當值更改，其餘的相同的不會變動，但傳引用會同時變動。
  還能夠在子組件中經過this.$parent.屬性/方法

父組件獲取子組件

  原始的方式經過自定義事件$on()監聽和$emit()觸發來傳遞數據；在子組件調用的時候@total=''監聽，在子組件的對應參數變化時使用this.$emit('total')觸發。$emit(向父組件傳遞的事件名，向父組件傳遞的數據)
  還能夠在父組件中調用子組件的時候，經過ref屬性綁定，而後，this.$refs.xxx.屬性/方法

非父子組件傳值

  新建一個公共的Vue實例publicVue，用它傳值。在傳送方引入這個公共實例，經過publicVue.$emit("名稱","數據")發送。在接收方也映入這個公共實例，經過publicVue.$on("名稱",function(data){})接收。

<div id="#app">
      <my-parent :message="message"></my-parent>
  </div>

  //子組件模板
  <template id="child">
      <div> {{message}} </div>
  </template>

  //父組件模板
  <template id="parent">
      <div>
          <my-chilid :message="message"> </my-chilid>
      </div>
  </template>

  <script>
      //子組件的實例
      let Child = Vue.extend(
          template:"#child",
  　　  //在子組件實例時使用 props 顯式的聲明須要的參數(字符串形式)
          //第一種寫法
          //props:["message"]
          //第二種寫法，比第一種更嚴謹
          props:{
              message:{
                  type:String,
                  required:true
              }
          }
      );
      
      //註冊父組件
      Vue.component("my-parent",{
          //父組件也要向外層拿數據
          props:["message"],
          //子組件註冊
          components:{
              "my-chilid":Child
          },
          template:"#parent"   
      })

      new Vue({
          el:"#app",
          data:{
              message:"今每天氣很好！"
          }
      })          
  </script>

slot的介紹

  slot分爲匿名插槽和實名插槽，匿名插槽能夠填入任何標籤，實名插槽則必須有對應的slot屬性的標籤，標籤的slot的屬性值和slot的name屬性值對應

<div id="app">
      <my_slot>
          <div slot="cpu"></div>
          <div slot="memory"></div>
          <div slot="hard-drive"></div>
      </my_slot>
  </div>
  //組件模板
  <template id="my_slot">
      <div>
          //匿名插槽
          <slot> 能夠替換任何標籤 ，默認顯示提示的內容</slot>
          //實名插槽
          <slot name="cpu"> </slot>
          <slot name="memory"> </slot>
          <slot name="hard-drive"> </slot>
      </div>
  </template>

  <script>
      Vue.component("my-slot",{
          template:"#my_slot"   
      })            
  </script>

路由

安裝 vue-router

npm install vue-router --save-dev

<div id="app">
      <div>
          //6.路由入口 
          <router-link to="/html5"> html5學院 </router-link>
      </div>
      <div>
          //7.路由出口 
          <router-view></router-view>    
      </div>
  </div>

  <template id="html5">
      <div> 學習html5 </div>
  </template>   

  <script>
      //1.引入vue-router
      import VueRouter from "vue-router"

      //2.用 vue-router
      Vue.use(VueRouter );

      //3.建立組件 
      let Html5 = Vue.extend({
          template:"#html5"
      })

      //4.配置路由 
      const router = new VueRouter({
          routes:[
              {path:"/html5",component:"Html5"},
              //記得配置根路由(用 redirect 從新指向)
              {path:"/" ,redirect:"/html5"}
          ],
          //刪除路徑中的 /# 
          mode:"history"
      });

      //5.建立 Vue 實例並掛載 
      new Vue({
          router
      }).$mount("#app");
  </script>

多層路由

//9.配置子路由入口和出口，用 name 代替路徑的新入口 
  <router-link :to="{name:'html5'}"> html5學院 </router-link>

  <script>
      //7.建立子組件
      //8.定義子路由
      const routes = [
          //定義根路由
          {path:"/",redirect:"/html5"},
          {
              path:"/html5",
              //入口的路徑太長，能夠用 name 屬性代替
              name:"html5",
              component:Html5",
              children:[
                  {path:"child1",component:Child1"},
                  //定義根路由
                  {path:"/",redirect:"child1"}
              ]
          }
      ];
  </script>

頁面傳參

  用name能夠傳參，組件中用$route.name接收；
  還能夠用<router-link>標籤中的to屬性進行傳參，使用時:to={name:'xxx',params:{username:'xxx',id:'xxx'}}，這時傳遞參數就得用params了，接收參數是$route.parmas.username，這裏的name還能夠當作路徑使用

  經過url動態路由傳參，在路由設置的時候以:冒號的形式傳遞參數，這就是對參數的綁定，path:'/params/:newsId/:newsTitle'，在<router-link>設置參數<router-link to="/params/198/vue-router">傳遞參數</router-link>；在組件中接收參數，$route.params.newsId；

  經過url GET傳參，還能夠在<router-link>設置參數<router-link to="/content?newsId =123">傳遞參數</router-link>；在組件中接收參數，$route.query.newsId；

編程式導航

  也就是經過JS跳轉路由，

this.$router.push('home')。
    this.$router.push(name:'content',params:{userId:123});

路由模塊化

  單獨寫一個router.js，而且在程序末尾導出router實例，export default router。在main.js中import router from "../router.js"

路由其餘

  經過在實例中注入路由，咱們能夠在任何組件內經過this.$router訪問路由，也能夠經過this.$router訪問當前路由。

  單頁面多路由區域操做，在<router-view name='自定義組件名'></router-view>和components:{default: '默認組件' ，自定義組件名:'組件'}，其中name和 自定義組件名對應，

  路由的從新定向，有時候咱們的路徑不一致，但但願到同一頁面，這就須要頁面重定向了redirect。path以後就不用寫組件了，設置redirect，參數爲需求頁面的path值

  alias別名也能夠實現重定向的效果，在path和component寫完以後，設置alias；用的時候路徑就寫alias值，也會跳轉到path路徑的頁面；<router-link to="/alias">；別名請不要用在path爲/中，是不起做用的。

頁面轉場動畫

  路由的過渡動畫，在<router-view>外層加上<transition>，組件過渡過程當中，會有四個CSS類名進行切換，這四個類名與transition的name屬性有關，好比name="fade"，過渡模式是默認的mode模式in-out模式，咱們也能夠設置爲out-in。若是想作出實用酷炫的過渡效果，能夠用插件等工具。

history模式

  路由的mode的設置爲history，能夠省略瀏覽器顯示的路徑中的#

404頁面

  404頁面，當用戶地址輸入錯誤，應該顯示有好的提示信息，顯示進入錯誤，{path:'*',component:Error}，Error組件能夠作的好看好一點；

路由鉤子函數

  路由中的鉤子函數，路由的鉤子選項能夠寫在路由配置文件中，也能夠寫在咱們的組件模板中。
  在路由文件中咱們只能寫一個beforeEnter，就是在進入此路由配置時。bdforeEnter的鉤子函數，須要傳遞三個參數beforeEnter:(to,from,next)=>{}:

• to路由將要跳轉的路徑信息，信息是包含在對像裏邊的；
• from路徑跳轉前的路徑信息，也是一個對象的形式。
• next路由的控制參數，經常使用的有next(true)和next(false)。至關於一個控制開關，確認是否跳轉的。咱們能夠在這裏作個判斷語句，判斷參數是否正確，路徑是否正確，而後再跳轉。

  在模板中就能夠有兩個鉤子函數可使用：beforeRouteEnter在路由進入前的鉤子函數。beforeRouteLeave在路由離開前的鉤子函數。也能夠輕易的讀出to和from的值。記得必定寫next()，否則路由失敗。

  在業務邏輯代碼中須要跳轉頁面咱們如何操做，這就須要編程時導航了，$router.go(-1)後退；$router.go(1)前進；$router.push('xxx')，xxx能夠是任意路徑。這裏是$router，不是$route。

生命週期

  beforeCreate(){}, 組件實例化以前執行的函數，通常作加載的動畫
  created(){}, 組件實例化完成，但還沒生成DOM，頁面還未顯示。能夠獲取接口數據，賦給屬性，還能夠結束上面的加載動畫。
  beforeMount(){}, 組件掛載前，頁面仍未顯示，但虛擬DOM已配置
  mounted(){}, 組件掛載完成，此方法只會執行一次，此方法執行後，頁面顯示，請求網絡數據，業務處理
  beforeUpdate(){}, 組件更新前，頁面仍未更新，但虛擬DOM已配置
  updated(){}, 組件更新後，此方法執行後，頁面顯示，通常咱們在這裏處理組件發生改變的狀況
  beforeDestory(){}, 組件銷燬前
  destoryed(){}, 組件已銷燬

渲染機制

  vm.$mount爲vue渲染的主要函數
  獨立構建和運行時構建:

• new vue，執行初始化。
• 掛載$mount方法，經過自定義render方法、template、el等生成Render函數。
• 經過Watcher監聽數據變化。
• 當數據變化時，Render函數執行生成VNode對象。
• 經過patch方法，對比新舊VNode對象，經過DOM Diff方法，添加修改刪除真正的Dom元素。

狀態管理VUEX

  vue項目當中的非父子非兄弟組件之間的通信傳值能夠用url、storage 和 cookie，在小型項目中這樣用是很好的。若是是大型項目，用vuex就更合適，vuex能夠把全部的狀態(參數)共享在一塊兒，同時自動更新。

安裝 vuex

npm install vuex --save

使用 vuex

• 在src文件夾下建立vuex文件夾，而後在該文件夾內建立store.js文件。
• 而後在store.js文件內引入vue和vuex，而後使用Vuex，新建store對象，咱們就能夠在store中寫state，mutations，getters，actions，同時向外導出store；
• 也可使用模塊組moudels，每一個module都有本身的state、getter、mutation、actions，而且要在store中引入全部moudel；
• store下面的getter.js和actions.js，這兩個主要是管理模塊之間狀態；
• 在mian.js中 引入store文件，在實例化Vue對象時，加入引入的store對象，這樣就能夠在全部子組件中使用vuex了

state

  state，是vuex本身維護的一份狀態數據。數據的格式須要你根據業務去設計。
  在組件中獲取state參數，有兩種方式，
  第一種就是直接取this.$store.state.xxx；
  第二種是使用映射函數mapState函數取，先從vuex引入mapState( 引入的時候要用{}) ，再mapState(["xxx"])，當和其餘計算屬性同時使用的時候要用延展操做符...mapState(["xxx"])，寫在computed裏；

mutations

  mutations，更改Vuex的store中的狀態的惟一方法就是mutations``。mutations必須是同步函數。
  每個mutations都有一個事件類型type和一個回調函數handler；
  使用常量替代mutation事件類型；待擴展。
  在組件中調用mutations裏的方法，有兩種方式:

• 第一種須要經過this.$store.commit("xxx")方法調用，能夠添加第二個參數進行傳參，$store.commit("xxx","xxx")，也能夠傳入一個對象。
• 第二種是使用映射函數mapMutations調用，先從vuex引入mapMutations( 引入的時候要用{}) ，再mapMutations["xxx"]，當和其餘方法同時使用要使用延展操做符...mapMutations (["xxx"])，調用的時候能夠直接傳參，寫在methods裏；

getters

  getters，能夠把他看做在獲取數據以前進行的一種再編輯，至關於對數據的一個過濾和加工。能夠認爲是store的計算屬性，就像計算屬性同樣，getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。
  getters接受state做爲其第一個參數，getters也能夠接受其餘getters做爲第二個參數，你也能夠經過讓getter返回一個函數，來實現給getter傳參，在你對store裏的數組進行查詢時很是有用。
  在組件中可使用this.$store.getters.xxx或者mapGetters["xxx"]調用，與mapState相似，也是寫在computed裏。
  在組件中設置了mapGetters,在組件的beforeCreated事件中，是取不到相應的值的，在created以後，才能取到。？？？，待了解

actions

actions，相似於mutations，不一樣在於：actions提交的是mutations，而不是直接變動狀態。actions 能夠包含任意異步操做，而mutations是同步操做。
  Action函數接受一個與store實例具備相同方法和屬性的context對象，所以能夠調用context.commit("xxx")，提交一個mutation，或者經過context.state和context.getters來獲取state和getters。也能夠傳入{commit}，直接commit("xxx")，這裏actions的第一參數永遠默認爲是context，很容易理解，由於我獲取的是狀態，也就是若是你直接寫(commit)的話，就必須寫成(commit) => commit.commit.xxx。
  組件中使用的時候，有兩種方式，this.$store.dispatch("xxx")和...mapActions (["xxx"])，寫在methods裏。

moudels

  moudels，Vuex只能有一個單一的store對象，可是當應用變得龐大複雜的時候store就可能變得很是的臃腫；因此 Vuex 容許咱們將store分割成模塊module。每一個模塊擁有本身的state、mutation、action、getter，甚至是嵌套子模塊——從上至下進行一樣方式的分割。

  對於模塊內部的mutation和getter，接收的第一個參數是模塊的局部狀態對象state。一樣，對於模塊內部的action，局部狀態經過context.state暴露出來，根節點狀態則爲context.rootState。對於模塊內部的getter，根節點狀態會做爲第三個參數暴露出來。

鉤子函數

  過濾filters:{ }過濾符的使用；

混入

  混入mixins是一種分發Vue組件中可複用功能的很是靈活的方式。混入對象能夠包含任意組件選項。當組件使用混入對象時，全部混入對象的選項將被混入該組件自己的選項。

過渡和動畫

顯性的過渡時間

  你能夠用<transition>組件上的duration屬性定製一個顯性的過渡持續時間 (以毫秒計)：

<transition :duration="1000">...</transition>

  也能夠定製進入和移出的持續時間：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

  當有相同標籤名的元素切換時，須要經過key特性設置惟一的值來標記以讓Vue區分它們。

過渡模式

  同時生效的進入和離開的過渡不能知足全部要求，因此Vue提供了 過渡模式。

• in-out：新元素先進行過渡，完成以後當前元素過渡離開。
• out-in：當前元素先進行過渡，完成以後新元素過渡進入。

<transition name="fade" mode="out-in">
    <!-- ... the buttons ... -->
  </transition>

實例方法

  vm.$set(target,key,value);往對象中添加屬性

ref屬性獲取dom節點

<div ref="box"></div>
  this.$ref.box.style="xxx"

獲取當前節點的屬性

  $event.target.style.color="red"

網絡請求

vue-resource

  vue本身的資源請求工具，直接在main.js中import引入，而後Vue.use(vue-resource)，以後再全部組件中均可以使用了。this.$http.get(url).then((res)=>{},(err)=>{})

axios

  第三方工具，在哪用就在import引入，axios.get(url).then(()=>{}).catch()

UI框架

Mint-UI 移動端的UI框架

  https://mint-ui.github.io/docs/#/zh-cn2

//在main.js 中，
    import Mint from 'mint-ui';
    import 'mint-ui/lib/style.css'
    Vue.use(Mint);

Element-UI PC端的UI框架

  http://element-cn.eleme.io/#/zh-CN/component/installation

　　//在 mian.js 中，
　　import ElementUI from 'element-ui';
　　import 'element-ui/lib/theme-chalk/index.css';
　　Vue.use(ElementUI);

　　字體文件若是報錯，webpack.config.js配置file_loader

　　{
　　　　test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
　　　　loader: 'file-loader'
　　}