vue常用的組件有哪些

這篇文章主要介紹“vue常用的組件有哪些”，在日常操作中，相信很多人在vue常用的組件有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue常用的組件有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

本文操作環境：windows7系統、vue2.5.17版，DELL G3電腦。

vue常用組件有哪些？

本文所有組件示例都基于vuecli2。其中大部分組件，使用了vue.use()方法。
這里解釋一下為什么使用vue.use()。因為，當插件是一個方法的時候，
我們只需要把該方法定義到vue的prototype上就可以使用：

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

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

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

Vue.use(Router)

ok，那么我們先從vue全家桶那幾個核心組件開始介紹。

核心組件

路由：vue-route

龍哥有很多小伙伴在學習vue到了route這一步就放棄了。因為要解釋route是非常困難的，route的存在證明我們做的是一個SPA單頁應用，而不是一大堆靜態html頁面。

那么到底什么是route呢？我們拋開服務端。換個說法，你知道什么是響應式吧。響應式布局，通過媒體查詢出對方的手機型號和屏幕的分辨率， 為其切換展示的樣式。

route你可以理解它就是url的“媒體查詢”。通過在url輸入不同的路徑，可以響應不同的vue頁面。

首先，我們打開vuecli中的main.js文件，可以發現route在這里被引入并且配置到vue上了。

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

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

我們順藤摸瓜找到這個route的index.js配置文件，就可以發現里面都是為訪問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
    }]
})

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

這里需要注意的是，route還涉及到了子路由和路由拆分的功能，這里不做過多闡述，請關注龍哥那篇關于vue-route的詳細教程，這里只做介紹。

異步數據請求：axios

還記得jquery中的這個方法嗎？

$.ajax()

它實際上是對javascript中原生ajax方法的一個封裝。

axios也是，只不過它作用于vue中。它的引入方法跟route不太一樣，因為它僅僅是一套方法，所以我們直接定義到vue的prototype上即可。
首先，我們通過npm進行安裝：

npm install axios -s-d

然后打開main.js：

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

調用的時候，你可以寫在methods或者mounted等生命周期中。

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

另外，你還可以通過axios在打包時區分線上和線下環境

//配置axios區別線上和測試環境
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 狀態管理

首先使用npm進行安裝：

npm i vuex --save

在使用vuex的時候，我們需要在src目錄下新建一個store文件夾，然后在里面創建我們的狀態樹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還是單一狀態樹。那么store狀態樹又怎么來配置呢？

打開store中的這個index.js

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

我們可以發現store其實主要就是依靠這5個參數在發會作用：

子狀態樹的寫法也完全一樣：

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

  },
  mutations: {

  },
  actions:{

  }
};

export default model1;

混入其中的高手冷門知識

vuex有一個鮮為人知的輔助方法：mapState

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

有很多同學不知道這個函數是干啥用的，龍哥用最簡單的方法來介紹一下，這里涉及到了computed這個比較常用的vue屬性，這個東西就是前面提到的計算屬性，它主要是在不改變原始值的情況下對值做一些處理。

如果，你一個一個通過

this.$store.state.xx

的當時去調用store的值放到這個計算屬性里面，你不是老得寫這個this.$store嗎。于是vuex官方就提供了一個讓你可以省略前面這一段的方法。你可以通過這個方式一次獲得所有store中的state中的數據，然后傳入state直接用就行了。

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

UI庫

Element UI

依然使用npm進行安裝，當然如果你有cnpm就更好了：

cnpm install element-ui -s-d

element作為你必須掌握的ui庫，它和iview的區別再于用戶量更大，研發團隊人員更多，發現錯誤的機率更高，在組件支持項中也超過iview。更屌的是element還支持Sketch和Axure，讓產品經理和設計師也能從容參與到開發中來。所以element成為了本文首選。

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

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

Vue.use(ElementUI);

調用的時候也非常簡單：

<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開頭的標簽插入到你的.vue文件中即可。

element支持的組件非常多，你可以查看這里，里面的組件代碼已經寫的非常清楚了，直接復制粘貼到你的.vue中即可。

焦點圖 / 輪播圖

swiper

你可能會問了，輪播圖組件多了去了，為什么就介紹swiper呢？因為龍哥過去在制作非spa頁面的時候，對swiper可以說是情有獨鐘，無論是兼容性還是在移動/非移動端，swiper的表現都可圈可點。官方提供完整的api手冊，讓擴展修改也非常得心應手。

使用cnpm安裝

cnpm install swiper -S -d

安裝完畢以后，我們需要把swiper封裝成一個組件。這個是非常簡單的，新建一個swiper.vue即可。

<template>
    <p>
        <p class="swiper-container">
            <p class="swiper-wrapper">
                <p class="swiper-slide">Slide 1</p>
                <p class="swiper-slide">Slide 2</p>
                <p class="swiper-slide">Slide 3</p>
            </p>
        </p>
    </p>
</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>

因為是局部的，我們甚至都不需要再main中去引入它。用的時候直接定義到components上即可。

components: {
  swiper
},

然后把標簽寫到你的項目中：

<swiper></swiper>

圖表

vue-echarts

vue-echarts是echarts的一個封裝，它和百度echarts的區別在于，它是基于vue的一個對象..操作上更加的簡單，如果你僅僅是為了展示圖表，建議你使用vue-echarts。但是如果你的項目中含有對echarts的深度定制，例如改變了原始圖表的展示方式或者點擊事件和較為復雜的邏輯，還是建議你使用百度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就變成了一個全局組件，我們直接在頁面中調用即可。

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

另外在data中添加一個配置文件的變量，再mounted生命周期中注入內容即可。

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
              }]
          }
    },
}

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

視頻播放

vue-video-player

vue-video-player是一個視頻播放解決方案，功能非常全。

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

cnpm install vue-video-player -S -d

然后老規矩打開main.js填入以下內容：

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>

最后增加一個配置變量：

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

每次要切換視頻的時候，修改src即可。

相冊

vue-photo-preview

有的時候，我們會遇到一個需求，就是把小圖放大或者多個圖片方大后輪播的情況，這個時候用element ui中自帶的組件已經沒辦法滿足我們的使用了。這里推薦一個相冊插件：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 //關閉全屏按鈕
}
Vue.use(preview,options)

使用方法非常簡單，只要再img中添加兩個屬性即可。

//在img標簽添加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

前端進行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'));

交互數據模擬

mockjs

大部分時候，我們可能需要根據設計圖做一個靜態頁面，因為我們不知道好多地方填上數據以后是什么樣子的。這個時候我們肯定不能等著后端開發人員的接口開發完了再去填數據，這樣效率太低了。

這里推薦使用mockjs。mock是一個可以攔截http請求生成一個微數據短的插件，讓我們不用等著后端人員就可以自己先填入一部分數據。

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

cnpm install mockjs --save-dev

使用上是非常方便的，因為mock會自動攔截http請求。
首先，我們再src中創建一個mock文件夾，并且再里面創建index.js：

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

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

你可以理解這個mock就是你的數據端，這里面配置的url，就是你獲取虛擬數據要使用到的url。

然后打開main.js把這個js給引用上。

require('./mock/index')

最后我們再組件中請求這個地址即可獲得數據：

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

動態標題

vue-meta-info

spa有一個非常大的問題就是，它實際上沒有那么多頁面，我們所有的頁面邏輯關系都是通過route完成的。

可是，這樣就誕生了一個問題，頁面的title部分并沒有切換掉。我們就需要動態的去處理這個titile了。這里推薦使用vue-meta-info來解決這個問題，說實話，我曾經一度認為這個東西是一個核心組件。因為你的title不切換的話，總感覺好像少點什么一樣。

安裝：

cnpm i vue-meta-info -S -d

main.js中

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

使用方法

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

優化篇

圖片懶加載 vue-lazyload

vue-lazyload的作用就是：當你滾動條還沒有滾動到這一片區域的時候，就不加載一片區域中的圖片，會用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中路徑的寫法稍微有點區別。

上傳圖片壓縮 lrz

在圖片上傳的時候，我們肯定不能直接把一張大圖給傳上去，這里我們需要限制一下大小。然后，可能更好的方法就是，進行壓縮。
這里推薦使用lrz插件。
安裝：

cnpm install lrz -S -d

然后再main中加載lrz:

import lrz from 'lrz'

使用的時候:

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

到此，關于“vue常用的組件有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！