閱讀本文需要注意的地方

本文所有組件示例都基于vuecli2贿讹。其中大部分組件渐逃，使用了vue.use()方法。
這里解釋一下為什么使用vue.use()民褂。因?yàn)榍丫眨?dāng)插件是一個(gè)方法的時(shí)候，
我們只需要把該方法定義到vue的prototype上就可以使用：

import axios from 'axios'
Vue.prototype.axios = axios

但是如果插件是一個(gè)對象赊堪，我們就需要通過vue.use()來引入該對象：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

ok面殖，那么我們先從vue全家桶那幾個(gè)核心組件開始介紹。

核心組件

路由：vue-route

龍哥有很多小伙伴在學(xué)習(xí)vue到了route這一步就放棄了哭廉。因?yàn)橐忉宺oute是非常困難的脊僚，route的存在證明我們做的是一個(gè)SPA單頁應(yīng)用，而不是一大堆靜態(tài)html頁面遵绰。

那么到底什么是route呢辽幌？我們拋開服務(wù)端。換個(gè)說法椿访，你知道什么是響應(yīng)式吧乌企。響應(yīng)式布局，通過媒體查詢出對方的手機(jī)型號(hào)和屏幕的分辨率成玫， 為其切換展示的樣式加酵。

route你可以理解它就是url的“媒體查詢”。通過在url輸入不同的路徑哭当，可以響應(yīng)不同的vue頁面猪腕。

首先，我們打開vuecli中的main.js文件钦勘，可以發(fā)現(xiàn)route在這里被引入并且配置到vue上了陋葡。

//第一步引入route，form后面是你的route文件地址
import router from './router'

//加載route
new Vue({
  el: '#app',
  render: h => h(App), //h=createElement 即渲染app中所有節(jié)點(diǎn)
  router, //route是在這一步裝載到vue中的
  store,
  components: {
    App
  },
  template: '<App/>',
})

我們順藤摸瓜找到這個(gè)route的index.js配置文件彻采，就可以發(fā)現(xiàn)里面都是為訪問url做的配置脖岛。

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [{
        path: '/',
        name: 'index',
        component: index
    }]
})

如果你嫌麻煩你可以直接在這個(gè)routes中多復(fù)制幾個(gè)path這一段朵栖，然后把路徑修改成你自己的。

這里需要注意的是柴梆，route還涉及到了子路由和路由拆分的功能陨溅，這里不做過多闡述，請關(guān)注龍哥那篇關(guān)于vue-route的詳細(xì)教程绍在，這里只做介紹门扇。

異步數(shù)據(jù)請求：axios

還記得jquery中的這個(gè)方法嗎？

$.ajax()

它實(shí)際上是對javascript中原生ajax方法的一個(gè)封裝偿渡。

axios也是臼寄，只不過它作用于vue中。它的引入方法跟route不太一樣，因?yàn)樗鼉H僅是一套方法，所以我們直接定義到vue的prototype上即可轿曙。
首先舆逃，我們通過npm進(jìn)行安裝：

npm install axios -s-d

然后打開main.js：

import axios from 'axios'
Vue.prototype.axios = axios

調(diào)用的時(shí)候梅桩，你可以寫在methods或者mounted等生命周期中。

let that = this;
this.axios({
  method: 'get',//請求方式
  url: 'URL',//請求地址
  params: {
    id: this.$route.query.id//發(fā)送的參數(shù)
  }
}).then(function(response) {
  //請求成功后獲得的內(nèi)容進(jìn)行哪些操作
  that.title = response.data.result[0].title
})

另外，你還可以通過axios在打包時(shí)區(qū)分線上和線下環(huán)境

//配置axios區(qū)別線上和測試環(huán)境
if (location.hostname === 'localhost') {
  axios.defaults.baseURL = process.env.API_PATH_TEST;
  //配置本地webSocketIO地址
  Vue.use(new VueSocketIO({
    debug: false,
    connection: 'localhost',
  }))
} else if (location.hostname === 'www.dangyunlong.com') {
  //配置線上webSocketIO地址
  Vue.use(new VueSocketIO({
    debug: false,
    connection: 'www.dangyunlong.com',
  }))
  axios.defaults.baseURL = process.env.API_PATH_PROD
}

vuex 狀態(tài)管理

首先使用npm進(jìn)行安裝：

npm i vuex --save

在使用vuex的時(shí)候，我們需要在src目錄下新建一個(gè)store文件夾炼邀，然后在里面創(chuàng)建我們的狀態(tài)樹js。

并且在main.js中引入它

//加載vue store
import store from './store'

new Vue({
  el: '#app',
  render: h => h(App),
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

從這里我們不難看出剪侮，vuex是基于store的拭宁。并且，vuex還是單一狀態(tài)樹瓣俯。那么store狀態(tài)樹又怎么來配置呢杰标？

打開store中的這個(gè)index.js

export default new Vuex.Store({
  state: {
    name: "dangyunlong",
    age: 30,
    index: {} //首頁信息
  },
  getters:{
    //getters 相當(dāng)于是vuex的計(jì)算屬性,主要作用是對state中的值進(jìn)行處理
    jia(state,num){
      return state.age + 1;
    },
    jian(state,num){
      return state.age - 1;
    }
  },
  mutations: {
    //vuex用于修改state中數(shù)據(jù)的方法
    gaiming(state, name) {
      state.name = name
    },
    getIndex(state, indexData) {
      state.index = indexData
    }
  },
  actions:{
      //actions 用于異步執(zhí)行vuex mutations中的方法 它不會(huì)直接修改state而是作用于mutations
      //actions 中的方法可以接收一個(gè)context參數(shù),這里的context就指vuex
      increment (context) {
        setTimeout(function(){
          //調(diào)用方式跟在.vue中一樣
          context.commit('gaiming',"abc")
          //1秒后調(diào)用mutations中的gaiming方法,名字已經(jīng)修改了
          console.log(context.state.name);
        }, 1000)
      }
  },
  modules: {
    // 子狀態(tài)樹
    a: model1
  }
});

我們可以發(fā)現(xiàn)store其實(shí)主要就是依靠這5個(gè)參數(shù)在發(fā)會(huì)作用：

子狀態(tài)樹的寫法也完全一樣：

const model1 = {
  state: {
    name: "longge",
    age:31
  },
  getters:{

  },
  mutations: {

  },
  actions:{

  }
};

export default model1;

混入其中的高手冷門知識(shí)

vuex有一個(gè)鮮為人知的輔助方法：mapState

computed:mapState({
  ageadd (state) {
    return state.count + this.localCount
  }
}),

有很多同學(xué)不知道這個(gè)函數(shù)是干啥用的腔剂，龍哥用最簡單的方法來介紹一下，這里涉及到了computed這個(gè)比較常用的vue屬性推掸，這個(gè)東西就是前面提到的計(jì)算屬性桶蝎，它主要是在不改變原始值的情況下對值做一些處理驻仅。

如果谅畅，你一個(gè)一個(gè)通過

this.$store.state.xx

的當(dāng)時(shí)去調(diào)用store的值放到這個(gè)計(jì)算屬性里面，你不是老得寫這個(gè)this.$store嗎噪服。于是vuex官方就提供了一個(gè)讓你可以省略前面這一段的方法毡泻。你可以通過這個(gè)方式一次獲得所有store中的state中的數(shù)據(jù)，然后傳入state直接用就行了粘优。

這里面還有一個(gè)混入寫法...mapState仇味。各位觀眾老爺請到龍哥vuex詳細(xì)教程中找一下呻顽，這里就不過多介紹了。

UI庫

Element UI

依然使用npm進(jìn)行安裝丹墨，當(dāng)然如果你有cnpm就更好了：

cnpm install element-ui -s-d

element作為你必須掌握的ui庫廊遍，它和iview的區(qū)別再于用戶量更大，研發(fā)團(tuán)隊(duì)人員更多贩挣，發(fā)現(xiàn)錯(cuò)誤的機(jī)率更高喉前，在組件支持項(xiàng)中也超過iview。更屌的是element還支持Sketch和Axure王财，讓產(chǎn)品經(jīng)理和設(shè)計(jì)師也能從容參與到開發(fā)中來卵迂。所以element成為了本文首選。

引入element ui的方式也非常簡單绒净，通過npm安裝后见咒，打開main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

調(diào)用的時(shí)候也非常簡單：

<el-menu default-active="1" class="el-menu-vertical-demo">
    <el-submenu index="1">
      <template slot="title">
        <img src="">
        <span></span>
      </template>
      <el-menu-item-group>
        <template slot="title"></template>
        <el-menu-item index="1-1"></el-menu-item>
        <el-menu-item index="1-2"></el-menu-item>
        <el-menu-item index="1-3"></el-menu-item>
      </el-menu-item-group>
    </el-submenu>
</el-menu>

直接把這種el開頭的標(biāo)簽插入到你的.vue文件中即可。

element支持的組件非常多挂疆，你可以查看這里改览，里面的組件代碼已經(jīng)寫的非常清楚了，直接復(fù)制粘貼到你的.vue中即可囱嫩。

焦點(diǎn)圖 / 輪播圖

swiper

你可能會(huì)問了恃疯，輪播圖組件多了去了，為什么就介紹swiper呢墨闲？因?yàn)辇埜邕^去在制作非spa頁面的時(shí)候今妄，對swiper可以說是情有獨(dú)鐘，無論是兼容性還是在移動(dòng)/非移動(dòng)端鸳碧，swiper的表現(xiàn)都可圈可點(diǎn)盾鳞。官方提供完整的api手冊，讓擴(kuò)展修改也非常得心應(yīng)手瞻离。

使用cnpm安裝

cnpm install swiper -S -d

安裝完畢以后腾仅，我們需要把swiper封裝成一個(gè)組件。這個(gè)是非常簡單的套利，新建一個(gè)swiper.vue即可推励。

<template>
    <div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
        </div>
    </div>
</template>

<script>
    import Swiper from "swiper";
    export default{
        name:"swiper",
        mounted(){
            var mySwiper = new Swiper ('.swiper-container', {

            })
        }
    }
</script>
<style>
    @import 'swiper/css/swiper.css';
    .swiper-container {
        width: 600px;
        height: 300px;
    }
</style>

因?yàn)槭蔷植康模覀兩踔炼疾恍枰賛ain中去引入它肉迫。用的時(shí)候直接定義到components上即可验辞。

components: {
  swiper
},

然后把標(biāo)簽寫到你的項(xiàng)目中：

<swiper></swiper>

圖表

vue-echarts

vue-echarts是echarts的一個(gè)封裝，它和百度echarts的區(qū)別在于喊衫，它是基于vue的一個(gè)對象..操作上更加的簡單跌造，如果你僅僅是為了展示圖表，建議你使用vue-echarts。但是如果你的項(xiàng)目中含有對echarts的深度定制壳贪，例如改變了原始圖表的展示方式或者點(diǎn)擊事件和較為復(fù)雜的邏輯陵珍，還是建議你使用百度echarts。

安裝方式跟其他vue組件一樣：

npm install echarts vue-echarts

然后打開main.js輸入

import ECharts from 'vue-echarts';
import 'echarts/lib/chart/line';
Vue.component('chart', ECharts);

這樣vue-echarts就變成了一個(gè)全局組件违施，我們直接在頁面中調(diào)用即可互纯。

<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>

另外在data中添加一個(gè)配置文件的變量，再mounted生命周期中注入內(nèi)容即可磕蒲。

export default {
    name: 'index',
    data() {
        return {
            orgOptions: {},
        }
    },
    mounted: function() {
          //echarts
          this.orgOptions = {
              xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: 'line',
                  smooth: true
              }]
          }
    },
}

其中具體圖表設(shè)置請查看這里伟姐。
你可以下載其中的例子然后打開http://localhost:8080/demo查看。

視頻播放

vue-video-player

vue-video-player是一個(gè)視頻播放解決方案亿卤，功能非常全愤兵。

使用cnpm命令安裝，可以加快安裝速度排吴。

cnpm install vue-video-player -S -d

然后老規(guī)矩打開main.js填入以下內(nèi)容：

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

然后在我們要使用的頁面上：

<video-player  class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player>

最后增加一個(gè)配置變量：

playerOptions : {
    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
    autoplay: false, //如果true,瀏覽器準(zhǔn)備好時(shí)開始回放秆乳。
    muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻。
    loop: false, // 導(dǎo)致視頻一結(jié)束就重新開始钻哩。
    preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)屹堰。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
    language: 'zh-CN',
    aspectRatio: '16:9', // 將播放器置于流暢模式，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值街氢。值應(yīng)該代表一個(gè)比例 - 用冒號(hào)分隔的兩個(gè)數(shù)字（例如"16:9"或"4:3"）
    fluid: true, // 當(dāng)true時(shí)扯键，Video.js player將擁有流體大小。換句話說珊肃，它將按比例縮放以適應(yīng)其容器荣刑。
    sources: [{
      type: "",//這里的種類支持很多種：基本視頻格式、直播伦乔、流媒體等厉亏，具體可以參看git網(wǎng)址項(xiàng)目
      src: "" //url地址
    }],
    poster: "../../static/images/test.jpg", //你的封面地址
    // width: document.documentElement.clientWidth, //播放器寬度
    notSupportedMessage: '此視頻暫無法播放，請稍后再試', //允許覆蓋Video.js無法播放媒體源時(shí)顯示的默認(rèn)信息烈和。
    controlBar: {
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: false,
      fullscreenToggle: true  //全屏按鈕
    }
}

每次要切換視頻的時(shí)候爱只，修改src即可。

相冊

vue-photo-preview

有的時(shí)候招刹，我們會(huì)遇到一個(gè)需求恬试，就是把小圖放大或者多個(gè)圖片方大后輪播的情況，這個(gè)時(shí)候用element ui中自帶的組件已經(jīng)沒辦法滿足我們的使用了疯暑。這里推薦一個(gè)相冊插件：vue-photo-preview训柴。

安裝：

cnpm install vue-photo-preview -S -d

添加main.js中

//加載圖片查看工具
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
var options={
  fullscreenEl:false //關(guān)閉全屏按鈕
}
Vue.use(preview,options)

使用方法非常簡單，只要再img中添加兩個(gè)屬性即可缰儿。

//在img標(biāo)簽添加preview屬性 preview值相同即表示為同一組
<img src="xxx.jpg" preview="0" preview-text="描述文字">
//分組
<img src="xxx.jpg" preview="1" preview-text="描述文字"><img src="xxx.jpg" preview="1" preview-text="描述文字"><img src="xxx.jpg" preview="2" preview-text="描述文字"><img src="xxx.jpg" preview="2" preview-text="描述文字">  

安全性

傳輸加密：sha256畦粮、md5散址、base64

前端進(jìn)行she256乖阵，md5和base64非常的簡單宣赔，只需要下載一套算法即可：

cnpm install js-md5 -S -d
cnpm install js-sha256 -S -d
cnpm install js-base64 -S -d

然后把下載好的算法全部定義到vue到prototype上：

//3種加密方式
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;

import sha256 from 'js-sha256';
Vue.prototype.$sha256 = sha256;

import base64 from 'js-base64';
Vue.prototype.$base64 = base64;

使用方法：

console.log("md5加密方式："+this.$md5('holle'));
console.log("sha256加密方式："+this.$sha256('holle'));
console.log("base加密方式："+this.$sha256('holle'));

交互數(shù)據(jù)模擬

mockjs

大部分時(shí)候，我們可能需要根據(jù)設(shè)計(jì)圖做一個(gè)靜態(tài)頁面瞪浸，因?yàn)槲覀儾恢篮枚嗟胤教钌蠑?shù)據(jù)以后是什么樣子的儒将。這個(gè)時(shí)候我們肯定不能等著后端開發(fā)人員的接口開發(fā)完了再去填數(shù)據(jù)，這樣效率太低了对蒲。

這里推薦使用mockjs钩蚊。mock是一個(gè)可以攔截http請求生成一個(gè)微數(shù)據(jù)短的插件，讓我們不用等著后端人員就可以自己先填入一部分?jǐn)?shù)據(jù)蹈矮。

使用cnpm命令安裝砰逻，可以加快安裝速度。

cnpm install mockjs --save-dev

使用上是非常方便的泛鸟，因?yàn)閙ock會(huì)自動(dòng)攔截http請求蝠咆。
首先，我們再src中創(chuàng)建一個(gè)mock文件夾北滥，并且再里面創(chuàng)建index.js：

//引入mockjs
const Mock = require('mockjs')

//響應(yīng)模擬數(shù)據(jù)
Mock.mock('http://api.com', {
    "user|5-100": [{
        'name': '@cname',   //中文名稱
        'age|1-100': 100,   //100以內(nèi)隨機(jī)整數(shù)
        'birthday': '@date("yyyy-MM-dd")',  //日期
        'city': '@city(true)'   //中國城市
    }]
});

你可以理解這個(gè)mock就是你的數(shù)據(jù)端刚操，這里面配置的url，就是你獲取虛擬數(shù)據(jù)要使用到的url再芋。

然后打開main.js把這個(gè)js給引用上菊霜。

require('./mock/index')

最后我們再組件中請求這個(gè)地址即可獲得數(shù)據(jù)：

//mock
this.axios({
    method: 'get',
    url: 'http://api.com'
}).then(function(response) {
    console.log(response);
})

動(dòng)態(tài)標(biāo)題

vue-meta-info

spa有一個(gè)非常大的問題就是，它實(shí)際上沒有那么多頁面济赎，我們所有的頁面邏輯關(guān)系都是通過route完成的鉴逞。

可是，這樣就誕生了一個(gè)問題司训，頁面的title部分并沒有切換掉华蜒。我們就需要?jiǎng)討B(tài)的去處理這個(gè)titile了。這里推薦使用vue-meta-info來解決這個(gè)問題豁遭，說實(shí)話叭喜，我曾經(jīng)一度認(rèn)為這個(gè)東西是一個(gè)核心組件。因?yàn)槟愕膖itle不切換的話蓖谢，總感覺好像少點(diǎn)什么一樣捂蕴。

安裝：

cnpm i vue-meta-info -S -d

main.js中

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

使用方法

metaInfo: {
    title: '生活隨記—黨云龍個(gè)人博客',
    meta: [{
        name: '黨云龍個(gè)人博客',
        content: '黨云龍,web前端開發(fā),vue,vuecli,webpack,canvas,html5,css3'
    }]
}

優(yōu)化篇

圖片懶加載 vue-lazyload

vue-lazyload的作用就是：當(dāng)你滾動(dòng)條還沒有滾動(dòng)到這一片區(qū)域的時(shí)候，就不加載一片區(qū)域中的圖片闪幽，會(huì)用loading中的gif圖去代替啥辨。

使用npm安裝方式：

npm install vue-lazyload   --save

然后在main.js中加入

//圖片懶加載 ----------------------------------------
import VueLazyload from 'vue-lazyload';
//初始化
Vue.use(VueLazyload, {
  preLoad: 1.3,
  //loading: ‘../static/loading.gif',
  loading: require('./assets/loading.gif'),
  attempt: 1
})

注意，loading的圖片在static和assets中路徑的寫法稍微有點(diǎn)區(qū)別盯腌。

上傳圖片壓縮 lrz

在圖片上傳的時(shí)候溉知，我們肯定不能直接把一張大圖給傳上去，這里我們需要限制一下大小。然后级乍，可能更好的方法就是舌劳，進(jìn)行壓縮。
這里推薦使用lrz插件玫荣。
安裝：

cnpm install lrz -S -d

然后再main中加載lrz:

import lrz from 'lrz'

使用的時(shí)候:

<template>
  <div>
    <div @click.stop="addPic" ref="upload" class="btn">
      <input type="file" accept="image/*" @change="onFileChange" style="display: none" multiple />chooseImg
    </div>
    <p v-if="!isNaN(before)">壓縮前:{{before|number}}kb</p>
    <p v-if="!isNaN(after)">壓縮后:{{after|number}}kb</p>
  </div>
</template>

import lrz from "lrz";
export default {
  data() {
    return {
      imgUrl: [],
      before: NaN,
      after: NaN
    };
  },
  methods: {
    onFileChange(e) {
      // 獲取文件對象
      var file = e.target.files[0];
      // 壓縮前文件大小
      this.before = file.size / 1024;
      this.imgUrl = URL.createObjectURL(file, { quality: 0 });
      lrz(this.imgUrl).then(rst => {
        // 壓縮后文件大小
        this.after = rst.fileLen / 1024;
      });
    }
  }
}