Vue學(xué)習(xí)之安裝依賴與數(shù)據(jù)源的案例分析

小編給大家分享一下Vue學(xué)習(xí)之安裝依賴與數(shù)據(jù)源的案例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

                                                           今天，給大家分享一個(gè)小型的后臺(tái)管理系統(tǒng)，感興趣的朋友了解一下，希望能對(duì)你有所啟發(fā)。

一、構(gòu)建項(xiàng)目與安裝依賴

　　構(gòu)建項(xiàng)目采用vue-cli腳手架搭建，npm、cnpm、vue-cli這些知識(shí)的基礎(chǔ)，網(wǎng)上一大片一大片的，就不過多的描述了。難理解的是里面的配置文件，初學(xué)的時(shí)候確實(shí)費(fèi)了很多勁，先不用去管太多的配置文件，這些主要是以后上線打包的一些配置問題。這里主要關(guān)注一下如何安裝依賴，依賴就是一個(gè)項(xiàng)目運(yùn)行需要的模塊，比如使用axios來獲取數(shù)據(jù)，就需要安裝相應(yīng)模塊。項(xiàng)目依賴在根目錄下的package.json文件中，如下是我項(xiàng)目使用的依賴包：

"dependencies": {
"axios": "^0.18.0",
"echarts": "^4.2.1",
"element-ui": "^2.7.2",
"mockjs": "^1.0.1-beta3",
"vue": "^2.5.2",
"vue-awesome": "^3.5.1",
"vue-particles": "^1.0.9",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1"
},

　　在最開始項(xiàng)目構(gòu)建后，有部分依賴包，如vue、vue-router是項(xiàng)目初始化后就存在的，其他的如果做項(xiàng)目時(shí)確定需要用到的依賴包，比如獲取數(shù)據(jù)需要的axios、UI設(shè)計(jì)框架element-ui這樣的可以直接在該處寫上名字和版本，其中^表示匹配該符號(hào)后面第一個(gè)數(shù)字開頭的版本的最新版；這里寫成后在終端中npm install或者npm i可以安裝這些依賴，然后在根目錄下會(huì)出現(xiàn)node_modules文件夾，這個(gè)文件夾都是依賴包文件，不需要我們修改任何東西，當(dāng)然也不要?jiǎng)h除，如果不小心刪除了，再次npm i就可以了。

　　如果其他的一些模塊不能確定需要使用的，在你做網(wǎng)頁時(shí)想到或者網(wǎng)上搜索到需要使用，再考慮單獨(dú)引入，引入的時(shí)候在終端中使用npm install **（模塊名字）的方法進(jìn)行安裝，安裝后的模塊名稱會(huì)自動(dòng)出現(xiàn)在package.json文件的dependencies中。

二、關(guān)于數(shù)據(jù)源

　　項(xiàng)目中的數(shù)據(jù)從哪里來呢，這是我最開始最常糾結(jié)的問題。其實(shí)對(duì)于前端來說，項(xiàng)目的數(shù)據(jù)應(yīng)該都來自于配套的后端程序，前后端分離后，后端處理好從項(xiàng)目業(yè)主提供的原始數(shù)據(jù)，提供給前端對(duì)外的數(shù)據(jù)API接口，這個(gè)接口是雙方約定好的，比如一些返回狀態(tài)，錯(cuò)誤碼，一些格式或者名稱等。但是開發(fā)的時(shí)候?qū)嶋H是同時(shí)開發(fā)的，也就是前端在開發(fā)過程中要使用的數(shù)據(jù)需要自己先根據(jù)需求進(jìn)行模擬，看其實(shí)際在網(wǎng)頁的表現(xiàn)是否滿足需求。當(dāng)然，另外也有一些網(wǎng)絡(luò)API接口，這相當(dāng)于別人處理好的數(shù)據(jù)，你根據(jù)其使用規(guī)則來使用。

　　數(shù)據(jù)的獲取在vue里有很多種方法，比如vue-resource的this.$http.get/post、jQuery的$.ajax、axios的this.$axios.get/post、fetch方法等。這些每一種方法都是可行的，需要掌握的基礎(chǔ)還是post/get請(qǐng)求方法，只是我自己對(duì)這塊都停留在會(huì)簡單的使用上面，這里就不深入探討這個(gè)了，這里只是說一些數(shù)據(jù)的來源。

　　1.vue腳手架項(xiàng)目可以使用mock數(shù)據(jù)，mock.js是隨機(jī)生成模擬數(shù)據(jù)，官網(wǎng)地址http://mockjs.com/。我在項(xiàng)目里只使用了少量的mock數(shù)據(jù)，如下：

1   Mock.mock(/login/, {
2     data: {
3       userId: "@integer(1,10)",
4       "nickname|1": ["Amy", "Michael", "Jack", "John", "Albert","Norton"],
5     },
6   });

　　這里要在main.js中導(dǎo)入mock.js，上述代碼在數(shù)據(jù)請(qǐng)求時(shí)訪問“l(fā)ogin”地址，對(duì)外提供1個(gè)nickname，在后面的數(shù)組中隨機(jī)生成。如果需要其他隨機(jī)生成的內(nèi)容，另外自己去模擬。相關(guān)教程：js視頻教程

　　2.直接在組件的data中定義數(shù)據(jù)，這是最簡單的方式了，如下：

  data() {
    return {
      introduction: [
        "登錄頁有粒子動(dòng)態(tài)效果，采用VueParticles，各項(xiàng)參數(shù)設(shè)置可參看https://www.jianshu.com/p/53199b842d25；",
        "登錄后的昵稱是用mock數(shù)據(jù)做的，mock.js需要在main.js中導(dǎo)入；",
        "左側(cè)導(dǎo)航欄是根據(jù)element-ui的導(dǎo)航寫的，直接可用index跳轉(zhuǎn)，頂部導(dǎo)航為ui的面包屑導(dǎo)航；",
        "天氣預(yù)報(bào)采用的echarts，需要導(dǎo)入使用，樣式應(yīng)該可以更美觀，此處只做了基礎(chǔ)的改變，數(shù)據(jù)為網(wǎng)上找的一個(gè)接口，部分城市可能無數(shù)據(jù)；",
        "文本編輯vue-quill-editor需要在main.js中導(dǎo)入，僅在編輯頁做了變化示例，后期可考慮傳值到父組件，可插入圖片；",
        "表格操作是根據(jù)某后臺(tái)管理系統(tǒng)的網(wǎng)頁仿寫的，有增刪改查等功能，選擇管理員和一般用戶按鈕可以看到不同的菜單，使用watch監(jiān)測(cè)數(shù)據(jù)變化；",
        "新聞資訊也是網(wǎng)上找的數(shù)據(jù)接口，設(shè)置自動(dòng)獲取時(shí)間改變接口的時(shí)間參數(shù)每天自動(dòng)刷新，開發(fā)時(shí)設(shè)置proxyTable代理進(jìn)行跨域；",
      ]
    };
  },

　　主要注意數(shù)據(jù)要用return返回，不使用return包裹的數(shù)據(jù)會(huì)在項(xiàng)目的全局可見，會(huì)造成變量污染；使用return包裹后數(shù)據(jù)中變量只在當(dāng)前組件中生效，不會(huì)影響其他組件，就類似于一個(gè)函數(shù)里的每個(gè)不同的實(shí)例這個(gè)概念。

　　3.使用vuex數(shù)據(jù)管理倉庫，這個(gè)一般在大型的項(xiàng)目數(shù)據(jù)比較復(fù)雜的時(shí)候使用，我GitHub上面的那個(gè)項(xiàng)目沒使用，但是在最開始學(xué)習(xí)的時(shí)候也在一個(gè)小頁面中使用過，學(xué)習(xí)地址https://vuex.vuejs.org/zh/。主要是State、Getter、Action、Mutations、Module這5個(gè)大塊，也有其輔助函數(shù)map開頭的幾個(gè)，自己學(xué)習(xí)的不算很深入，還需要加強(qiáng)學(xué)習(xí)。

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    person: [{
        name: '張三',
        age: '23',
        sex: '男',
        likes: '籃球',
        introuce: '',
        }, 
      {
        name: '李四',
        age: '25',
        sex: '男',
        likes: '游泳',
        introuce: ''
      },
      {
        name: '王五',
        age: '24',
        sex: '男',
        likes: '乒乓',
        introuce: ''
      },
      {
        name: '馬六',
        age: '22',
        sex: '男',
        likes: '排球',
        introuce: ''
      },
      {
        name: '周星星',
        age: '27',
        sex: '男',
        likes: '羽毛球',
        introuce: ''
      },
      {
        name: '李麗',
        age: '21',
        sex: '女',
        likes: '看書',
        introuce: ''
      },
      {
        name: '付蘭',
        age: '21',
        sex: '女',
        likes: '看電影、游泳',
        introuce: ''
      },
    ]
}
    const getters = {   
      showList(state){
        for (let i = 0; i < state.person.length; i++) { 
        state.person[i].introduce = '我叫'+state.person[i].name+'，我今年'+state.person[i].age+'歲了，我的愛好是'+state.person[i].likes   
        }  
        return state.person
      }
    };

    const mutations = {
      add(state,data){
        state.person.push(data)
      },
      del(state,i){
        state.person.splice(i,1)
      },
      edit(state,{index,data}) {  
        state.person.splice(index,1,data)
      },
    };


 
    const actions = {
      addPerson({commit},data){
        commit('add',data)
      },
      delPerson({commit},data){
        commit('del',data)
      },
      editPerson({commit},data){
        commit('edit',data)
      },
    };

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    person: [{
        name: '張三',
        age: '23',
        sex: '男',
        likes: '籃球',
        introuce: '',
        }, 
      {
        name: '李四',
        age: '25',
        sex: '男',
        likes: '游泳',
        introuce: ''
      },
      {
        name: '王五',
        age: '24',
        sex: '男',
        likes: '乒乓',
        introuce: ''
      },
      {
        name: '馬六',
        age: '22',
        sex: '男',
        likes: '排球',
        introuce: ''
      },
      {
        name: '周星星',
        age: '27',
        sex: '男',
        likes: '羽毛球',
        introuce: ''
      },
      {
        name: '李麗',
        age: '21',
        sex: '女',
        likes: '看書',
        introuce: ''
      },
      {
        name: '付蘭',
        age: '21',
        sex: '女',
        likes: '看電影、游泳',
        introuce: ''
      },
    ]
}
    const getters = {   
      showList(state){
        for (let i = 0; i < state.person.length; i++) { 
        state.person[i].introduce = '我叫'+state.person[i].name+'，我今年'+state.person[i].age+'歲了，我的愛好是'+state.person[i].likes   
        }  
        return state.person
      }
    };

    const mutations = {      add(state,data){
        state.person.push(data)
      },
      del(state,i){
        state.person.splice(i,1)
      },
      edit(state,{index,data}) {  
        state.person.splice(index,1,data)
      },
    };


 
    const actions = {      addPerson({commit},data){
        commit('add',data)
      },
      delPerson({commit},data){
        commit('del',data)
      },
      editPerson({commit},data){
        commit('edit',data)
      },
    };

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

View Code

　　上述代碼是一個(gè)很簡單的狀態(tài)管理，單獨(dú)定義一個(gè)倉庫store，State里定義數(shù)據(jù)，Getter獲取State數(shù)據(jù)相當(dāng)于計(jì)算屬性，Mutations方法函數(shù)、Action執(zhí)行Mutations。最后在組件里可以使用這個(gè)store里的數(shù)據(jù)，使用方法this.$store.dispatch("addPerson", data)，主要是dispatch方法。

　　這種方法在上線時(shí)如果數(shù)據(jù)復(fù)雜也建議使用這種方法，將State里數(shù)據(jù)的通過相關(guān)axios等方法獲取。

　　4.網(wǎng)絡(luò)API數(shù)據(jù)，網(wǎng)絡(luò)上有很多開源的API，也有一些收費(fèi)的API，這些API一般以json或者jsonp的格式存在。收費(fèi)的主要需要注意一般都有跨域問題存在。

　　開發(fā)時(shí)的跨域在根目錄下的config文件夾下的index.js中配置，找到proxyTable配置，在module.exports的dev里面

    proxyTable: {
      '/api': {  //代理地址  
        target: 'http://api01.idataapi.cn:8000/article',  //需要代理的地址  
        changeOrigin: true,  //是否跨域  
        secure: false,    
        pathRewrite: {  
            '^/api': ''   //本身的接口地址沒有 '/api' 這種通用前綴，所以要rewrite，如果本身有則去掉  
        },
    }
    },

　　這樣在獲取數(shù)據(jù)時(shí)api就是代表了http://api01.idataapi.cn:8000/article這個(gè)網(wǎng)站，然后通過拼接得到正確的數(shù)據(jù)接口。this.$axios.get('api’ + url)，這個(gè)url是接口后一部分的網(wǎng)址，注意與api之間的'/'，如果前面有后面則不要加，如果沒有后面開始就要加。這樣開發(fā)狀態(tài)下代理跨域就完成了。

　　線上的跨域其實(shí)如果是有后端系統(tǒng)的項(xiàng)目，一般有后端服務(wù)器端設(shè)置，上線后其實(shí)都在同一域，不存在跨域，如果需要跨域，一般由后端來解決也方便些。但是如果實(shí)在沒辦法，那網(wǎng)上找了也有很多其他方法，我主要采用的是nginx反向代理的方法。將前端代碼打包后放到nginx服務(wù)器，在nginx配置里設(shè)置代理即可。如下：

        location /api/ {
            rewrite ^/b/(.*)$ /$1 break;
            add_header 'Access-Control-Allow-Origin' '*';
            proxy_pass http://api01.idataapi.cn:8000/article/;
        }

　　這個(gè)配置在nginx安裝后的目錄下的config文件夾nginx.conf文件里下，在 server里添加上述代碼，即表示了用api代理http://api01.idataapi.cn:8000/article/地址。

以上是“Vue學(xué)習(xí)之安裝依賴與數(shù)據(jù)源的案例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！