vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié))

前言

vue是現(xiàn)階段很流行的前端框架，很多人通過(guò)vue官方文檔的學(xué)習(xí)，對(duì)vue的使用都有了一定的了解，但再在項(xiàng)目工程化處理的時(shí)候，卻發(fā)現(xiàn)不知道改怎么更好的管理自己的項(xiàng)目，如何去引入一些框架以及vue全家桶其他框架的使用，以下將詳細(xì)地介紹本人在處理工程文件構(gòu)建的過(guò)程；對(duì)于剛開(kāi)始解除vue的新手，建議使用官方腳手架vue-cli,當(dāng)然，如果你對(duì)于webpack很熟悉，你也可以自己動(dòng)手搭建自己的腳手架，當(dāng)然如果你沒(méi)把握的話，還是推薦使用vue-cli，能更好的幫助你搭建項(xiàng)目：

步驟一、安裝vue-cli

首先，我們可以通過(guò)npm安裝vue-clic,前提是我們需要有node環(huán)境，如果電腦還沒(méi)安裝node，先安裝，可通過(guò)

node -v

查詢node的版本號(hào)，有版本號(hào)則已經(jīng)安裝成功；

接下來(lái)，我們需要確保電腦已經(jīng)安裝了webpack，webpack是一個(gè)包管理工具，也是vue-cli的構(gòu)建工具，安裝也很簡(jiǎn)單，全局安裝只需要執(zhí)行

npm install webpack -g

緊接著，開(kāi)始我們vue-cli的安裝

npm install --global vue-cli

查看是否安裝成功，我們可以通過(guò)在cmd中輸入vue -V 查看，如下圖出現(xiàn)版本號(hào)則說(shuō)明安裝已經(jīng)完成；

我們可以打開(kāi)c盤>用戶>用戶名>AppData>Roaming>npm查看我們?nèi)职惭b的vue-cli,如下圖：

步驟二、構(gòu)建工程文件

安裝完vue-cli后，我們可以通過(guò)在cmd中輸入

vue init webpack projectName

生成webpack腳手架，在我們按下回車的時(shí)候，會(huì)出現(xiàn)一些提示問(wèn)題，對(duì)應(yīng)關(guān)系如下：

緊接著，我們使用cd squareRoot 移動(dòng)到文件夾squareRoot下，執(zhí)行

npm install

初始化項(xiàng)目，安裝package.json 文件中描述的依賴，初始化完成后，我們可以通過(guò)

npm run dev

運(yùn)行我們的項(xiàng)目，這個(gè)時(shí)候，我們可以打開(kāi)瀏覽器，輸入http://localhost:8080/，可看到如下界面，說(shuō)明我們的項(xiàng)目腳手架已經(jīng)初始化完成；

步驟三、項(xiàng)目結(jié)構(gòu)解析

雖然我們是通過(guò)vue-cli生成的項(xiàng)目結(jié)構(gòu)，但還是希望讀者能夠清楚的知道每個(gè)文件的作用，這樣對(duì)于我們學(xué)習(xí)該腳手架以及搭建自己的腳手架會(huì)有很好的幫助，如下圖，是一級(jí)目錄下的文件的作用：

構(gòu)建相關(guān)的代碼主要是放在build文件夾和config文件夾下，包括了開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境，即dev和product,可以打開(kāi)文件進(jìn)行閱讀，有接觸過(guò)node的小伙伴應(yīng)該可以很快讀懂對(duì)應(yīng)文件代碼的作用，這里就不做詳細(xì)的介紹了，需要注意的一點(diǎn)是，我們需要修改打包后文件的路徑的時(shí)候，可以通過(guò)修改config文件夾下的index.js文件，如下圖：

這里，我們需要在src目錄下新增一個(gè)page文件夾，用于存放頁(yè)面相關(guān)的組件，而components存在的是公共的組件，這樣做有利于我們更好的理解項(xiàng)目：

步驟四、引入U(xiǎn)I框架iView

該步驟并不是一定要實(shí)現(xiàn)的，實(shí)際項(xiàng)目操作中，要根據(jù)具體需求而引入對(duì)應(yīng)的UI框架或者不引入，鑒于指導(dǎo)的作用，在此處也做個(gè)示范，給與參考，可先閱讀iVew官網(wǎng)學(xué)習(xí)；

首先，我們應(yīng)進(jìn)行iView的安裝，可利用npm包管理工具安裝

npm install iview --save

安裝成功后，我們要將對(duì)應(yīng)的框架引入到項(xiàng)目中，這個(gè)時(shí)候，官網(wǎng)上有兩種方法可以實(shí)現(xiàn)，第一種是直接在main.js中做如下配置：

import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.config.productionTip = false
Vue.use(iView);
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

這種方式是一種全局引入的方式，引入后就在具體的頁(yè)面或者組件內(nèi)不需要再進(jìn)行其他的引入，但缺點(diǎn)是無(wú)論是否需要該組件，都將全部引入，對(duì)于性能優(yōu)化不是很好，這里推薦第二種用法，按需引入，這里需要借助插件babel-plugin-import實(shí)現(xiàn)按需加載組件，減小文件體積。首先需要安裝，并在.babelrc中配置：

npm install babel-plugin-import --save-dev

// .babelrc
{
 "plugins": [["import", {
 "libraryName": "iview",
 "libraryDirectory": "src/components"
 }]]
}

然后這樣按需引入組件，就可以減小體積了，這里需要注意的是，因?yàn)槲覀冃薷牧?babelrc文件，這將導(dǎo)致我們第一種引入方法失效了，如果再使用那種方式引入，會(huì)導(dǎo)致代碼報(bào)錯(cuò)；

<template>
 <div class="content">
 <div class="title">患者接診</div>
 <div>
 <Button type="primary" shape="circle" class="btn-time">臨時(shí)保存</Button>
 <Button type="primary" shape="circle" class="btn-cancel">取消就診</Button>
 <Button type="primary" shape="circle" class="btn-done">完成就診</Button>
 </div>
 </div>
</template>

<script>
 import {Button} from 'iview'
 export default {
 name: "fHeader",
 components:{
 Button
 }
 }
</script>

運(yùn)行結(jié)果如下圖

步驟五、vue-router的使用

如果沒(méi)有閱讀過(guò)官方文檔，建議大伙先閱讀，官網(wǎng)上的教程已經(jīng)足夠詳細(xì)，受益匪淺；學(xué)習(xí)的過(guò)程中，需要了解路由配置的基本步驟，命名規(guī)則，嵌套路由，路由傳參，具名視圖以及路由守衛(wèi)，滾動(dòng)行為和懶加載，這里我們就不一一詳細(xì)介紹了，官網(wǎng)已有，我們這里是做構(gòu)建是的配置和懶加載處理：

首先，我們應(yīng)該是安裝vue-router,這個(gè)在我們生成項(xiàng)目的時(shí)候，已經(jīng)將該依賴加載進(jìn)來(lái)了，下一步要做的是在router文件下index.js進(jìn)行配置：

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

Vue.use(Router)

export default new Router({
 scrollBehavior (to, from, savedPosition) {
 return { x: 0, y: 0 }
 },
 routes: [
 {
 path:'/',
 redirect:'/root'
 },
 {
 path: '/root',
 name: 'root',
 components: {
 Left:() => import('@/page/rootLeft.vue'),
 Middle: () =>import('@/page/rootMiddle.vue'),
 Right: ()=>import('@/page/rootRight.vue')
 }

 }

 ]
})

上面的代碼中，我們應(yīng)用到了幾個(gè)知識(shí)點(diǎn)，首先是滾動(dòng)行文，這里我們配置了當(dāng)路由跳轉(zhuǎn)的時(shí)候，默認(rèn)是滾動(dòng)到（0，0）位置，即頁(yè)面開(kāi)始位置，其次我們用到的redirect是一個(gè)路由重定向的配置，接下來(lái)，在路由"/root"下，配置了具名視圖，加載對(duì)應(yīng)組件到對(duì)應(yīng)視圖，我們引入組件的方式使用到了箭頭函數(shù)，這樣寫的目的是為了實(shí)現(xiàn)路由的懶加載，這樣構(gòu)建，只有在路由被執(zhí)行的時(shí)候，才有引入對(duì)應(yīng)的組件，對(duì)于頁(yè)面性能的優(yōu)化有很大的幫助；這里還需要注意的是，我們?cè)谝氲倪@些組件中，其實(shí)默認(rèn)都是打包到一個(gè)文件下的，這樣就會(huì)導(dǎo)致一次性引入的文件過(guò)大，為此，我們可以利用webapck打包工具，我們?cè)赽uild>webpack.base.conf.js文件下，增加如下代碼，用于配置輸出文件的模塊名稱，[name]是文件的名稱，[chunkhash]是打包文件的哈希值，加上這個(gè)是為了將其作為版本號(hào)，以解決瀏覽器緩存機(jī)制帶來(lái)的問(wèn)題：

然后在路由文件中引入組件的代碼如下：

{
 path:"/test",
 name:"test",
 component: ()=>import(/*webpackChunkName:"test"*/'@/page/test.vue')
}

在引入組件的時(shí)候，加上/ webapckChunkName: "文件名" /，就這可以將對(duì)于的組件打包到指定名稱的文件下，這樣可以減少首次加載的文件的大小，對(duì)于一些沒(méi)有聯(lián)系的功能，比如不同頁(yè)面，我們可以把對(duì)應(yīng)的組件放在同一個(gè)文件，這樣，既可以減少首次加載文件達(dá)大小，同時(shí)也可以將文件實(shí)現(xiàn)一個(gè)按需加載，提高頁(yè)面性能；

通過(guò)控制臺(tái)，我們可以查看當(dāng)前加載的文件資源，當(dāng)我們點(diǎn)擊測(cè)試按鈕的時(shí)候，頁(yè)面發(fā)生的跳轉(zhuǎn)，這時(shí)候，我們會(huì)發(fā)現(xiàn)，在Network下，會(huì)加一條新的資源加載信息，這一條就是我們的分塊打包后請(qǐng)求的資源；

步驟六、全局過(guò)濾器filter和全局注冊(cè)組件的引入

寫到這里的時(shí)候，可能很多人都會(huì)覺(jué)得，全局注冊(cè)filter和全局組件組件不是很簡(jiǎn)單嗎，直接Vue.filter()和Vue.component()不久解決了嗎，其實(shí)這么講也沒(méi)錯(cuò)，但是你可曾想過(guò)，注冊(cè)全組件是掛載在Vue對(duì)象下的，這意味這按照正常思路，我們要寫在main.js文件下，這樣就會(huì)造成，我們所寫的mian文件過(guò)于冗長(zhǎng)，你可以想一下，把全局的過(guò)濾器，和組件都寫進(jìn)去，著實(shí)丑陋，很不優(yōu)雅，下面跟大家說(shuō)一個(gè)優(yōu)雅的實(shí)現(xiàn)方法：
首先，我們?cè)趕rc>assets目錄下新建一個(gè)js文件夾，再該文件夾下再創(chuàng)建一個(gè)filters.js的文件，如下圖：

接下來(lái)，我們?cè)趂ilters.js文件下寫我們的全局過(guò)濾器，再將其拋出，寫一個(gè)時(shí)間過(guò)濾器作為例子：

const fullTime = val => {
 var dateObj = new Date(Number(val));
 var year = dateObj.getFullYear();
 var month =
 dateObj.getMonth() + 1 > 9
 ? (dateObj.getMonth() + 1).toString()
 : "0" + (dateObj.getMonth() + 1).toString();
 var date =
 dateObj.getDate() > 9
 ? dateObj.getDate().toString()
 : "0" + dateObj.getDate().toString();
 var hour =
 dateObj.getHours() > 9
 ? dateObj.getHours().toString()
 : "0" + dateObj.getHours().toString();
 var minutes =
 dateObj.getMinutes() > 9
 ? dateObj.getMinutes().toString()
 : "0" + dateObj.getMinutes().toString();

 return year + "/" + month + "/" + date + " " + hour + ":" + minutes;
};
module.exports={
 fullTime
}

做完這一步，其實(shí)我們的過(guò)濾器還沒(méi)寫完，還需要在main.js中寫一個(gè)注冊(cè)函數(shù)：

import Vue from 'vue'
import App from './App'
import router from './router'
import filters from './assets/js/filters'
import 'iview/dist/styles/iview.css';

Object.keys(filters).forEach(key =>{
 Vue.filter(key,filters[key])
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

這樣，我們就把filters文件下的過(guò)濾器函數(shù)注冊(cè)到Vue全局下，同樣道理，我們可以按照同樣的思路注冊(cè)全局組件，我們?cè)趕rc>assets>js下新建一個(gè)components.js文件，在其中引入我們想注冊(cè)的全局組件，export出一個(gè)對(duì)象，使用Object.keys獲取后注冊(cè)到全局下：

//components.js下
import testInput from '@/components/testInput.vue'

export default{
 testInput:testInput
}

//main.js下
import components from './assets/js/components'

Object.keys(components).forEach(key => {
 Vue.component(key,components[key])
})

優(yōu)雅的注冊(cè)全局組件和全局過(guò)濾器已經(jīng)講完，接下來(lái)就是API管理階段了。

步驟七、請(qǐng)求api管理

這里我們使用axios發(fā)起異步的請(qǐng)求，安裝很簡(jiǎn)單，npm install axios 即可，一開(kāi)始的時(shí)候，我使用的是直接在每個(gè)組件內(nèi)使用axios,到后面發(fā)現(xiàn)，但當(dāng)我需要修改api接口的時(shí)候，需要查找的比較麻煩，只因?yàn)闆](méi)有集中的對(duì)所有的api進(jìn)行管理，而且每個(gè)請(qǐng)求回來(lái)的接口都需要寫對(duì)應(yīng)的報(bào)錯(cuò)處理，著實(shí)麻煩，這里我新建一個(gè)fecth文件夾并在其下新建一個(gè)api.js用來(lái)存放所有的axios處理和封裝，：

//fetch/api.js
import axios from 'axios'

export function fetch(url, params) {
 return new Promise((resolve, reject) => {
 axios.post(url, params).then(
 response => {
 resolve(response.data)
 }
 ).catch(error => {
 console.log(error)
 reject(error)
 })
 })
}

getDefaultData=()=>{
 return fetch('/api/getBoardList');
}
export default {
 getDefaultData
}

這樣做的好處是集中化的管理了所有的api接口，當(dāng)我們需要修改接口相關(guān)的代碼，只需要在api.js中修改，包括路由修改以及路由攔截等，可讀性更好；在不同的組件內(nèi)，我們只需要把對(duì)應(yīng)的接口用解構(gòu)賦值的思想把它引入對(duì)應(yīng)的組件內(nèi)即可使用。

import {getDefaultData} from '@/fetch/api.js'

步驟八、代理服務(wù)器的配置

這個(gè)功能主要是我們?cè)谡{(diào)試接口的時(shí)候使用，因?yàn)楫?dāng)我們運(yùn)行npm run dev 的時(shí)候，實(shí)際上我們的項(xiàng)目已經(jīng)掛載在一個(gè)本地服務(wù)端運(yùn)行了，端口號(hào)為我們配置的8080，當(dāng)我們想在該項(xiàng)目下訪問(wèn)服務(wù)端接口數(shù)據(jù)的時(shí)候，就會(huì)產(chǎn)生跨域的問(wèn)題，這個(gè)時(shí)候，我們就需要使用到proxy代理我們的數(shù)據(jù)請(qǐng)求，在vue-cli中已有配置相關(guān)的代碼，我們僅需要把對(duì)應(yīng)的代理規(guī)則寫進(jìn)去即可，這里以一個(gè)通用配置例子實(shí)現(xiàn);

首先，我們?cè)趂etch文件夾下新建一個(gè)config.js的文件，用于存放我們的代理路徑配置：

const url = 'http://www.dayilb.com/';
let ROOT;
if (process.env.NODE_ENV === 'production') {
 //生產(chǎn)環(huán)境下的地址
 ROOT = url;
} else {
 //開(kāi)發(fā)環(huán)境下的代理地址，解決本地跨域跨域，配置在config目錄下的index.js dev.proxyTable中
 ROOT = "/"
}

exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;

接下來(lái)，我們要在config目錄下新建一個(gè)proxyConfig.js,存放代理服務(wù)器的配置規(guī)則：

var config= require("../src/fetch/config");
module.exports = {
 proxy: {
 [config.ROOT]: { //需要代理的接口，一般會(huì)加前綴來(lái)區(qū)分，但我個(gè)人是沒(méi)加，即‘/'都轉(zhuǎn)發(fā)代理
 target: config.PROXYROOT, // 接口域名
 changeOrigin: true, //是否跨域
 pathRewrite: {
 [`^/`]: '' //需要rewrite的，針對(duì)上面的配置，是不需要的
 }
 }
 }
}

最后，我們?cè)赾onfig目錄下的index.js文件中，引入我們的代理規(guī)則,并在，即

var proxyConfig=require('./proxyConfig')
...//省略號(hào)表示省略其他代碼
module.exports = {
...
proxyTable: proxyConfig.proxy,
...
}

重新啟動(dòng)項(xiàng)目，我們就可以做到代理轉(zhuǎn)發(fā)來(lái)實(shí)現(xiàn)跨域請(qǐng)求了。

步驟九、vuex狀態(tài)管理引入

終于，來(lái)到了最后一步，那就是我們的狀態(tài)管理vuex，其實(shí)這個(gè)東西不是說(shuō)所有項(xiàng)目都需要引入，看項(xiàng)目的具體需求，但需要對(duì)同一個(gè)數(shù)據(jù)源進(jìn)行大量的操作的時(shí)候，建議使用，如果每個(gè)組件的數(shù)據(jù)都可以輕易的在data中管理，那其實(shí)是沒(méi)必要引進(jìn)去的，該管理工具是更友好的解決了組件間傳值的問(wèn)題，包括了兄弟組件；

首先，我們需要安裝vuex,老規(guī)矩就是

npm install vuex

安裝完成后，我們需要對(duì)我們的項(xiàng)目進(jìn)行一些修改，首先是我們的目錄，我們需要src下新增一個(gè)store文件夾作為vuex數(shù)據(jù)存放位置，在開(kāi)始搭建前，我們需要有vuex的相關(guān)知識(shí)，我就不一一說(shuō)明，自行百度一下vuex官方文檔；眾所周知，vuex有state,getter,mutation,action等關(guān)鍵屬性，state主要是用于存放我們的原始數(shù)據(jù)結(jié)構(gòu)，類似與vue的data,不過(guò)它是全局的，getter類似于計(jì)算屬性computed,mutation主要用于觸發(fā)修改state的行為，actions 也是一種觸發(fā)動(dòng)作，只不過(guò)與mutation的區(qū)別在于異步的操作我們只能在action中進(jìn)行而不能在mutation中進(jìn)行，目的是為了瀏覽器更好的跟蹤state中數(shù)據(jù)的變化。

接下來(lái)，我們來(lái)看一下store文件夾中都有什么：

從上圖可知，我創(chuàng)建了一個(gè)index.js入口文件，getters.js,mutation.js和mutationtypes.js,以及actions.js，下面我們先看看index.js的源碼：

import Vue from 'vue'
import Vuex from 'vuex'

import actions from '@/store/actions.js'
import getters from '@/store/getters.js'
import mutations from '@/store/mutations.js'

Vue.use(Vuex)
const state = {
 recipeList:[],
 currRecipe:0
};
if (module.hot) {
 // 使 action 和 mutation 成為可熱重載模塊
 module.hot.accept(['./mutations'], () => {
 // 獲取更新后的模塊
 // 因?yàn)?babel 6 的模塊編譯格式問(wèn)題，這里需要加上 `.default`
 const newMutations = require('./mutations').default;
 // 加載新模塊
 store.hotUpdate({
 mutations: newMutations,
 })
 })
}
export default new Vuex.Store({
 state,
 mutations,
 getters,
 actions
})

首先，我們把Vuex插件引入vue中，并新建了一個(gè)Vuex.Store()對(duì)象，其中各項(xiàng)屬性值來(lái)自我們前面所創(chuàng)建的文件夾，中間module.hot是配置我們的action和mutation成為可熱重載的模塊，對(duì)于我們的調(diào)試更方便，當(dāng)我們創(chuàng)建為Vuex.store對(duì)象后，我們還需要把它聲明到main.js的頁(yè)面Vue對(duì)象中

import store from './store/index'

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

在使用mutation的時(shí)候，我們是推薦大家把所有的行為常量保存到一個(gè).js文件中，這樣更有利于管理我們的項(xiàng)目，因?yàn)槲覀兊膍utation往往是需要使用action進(jìn)一步封裝的，這樣我們?cè)谑褂玫臅r(shí)候，只需要修改常量對(duì)象里的屬性值，就可以達(dá)到同時(shí)修改mutation和action的對(duì)應(yīng)關(guān)系，一舉兩得，下面舉例給大家參考：

//mutationType.js
export default {
 ADD_NEW_RECIPT:'ADD_NEW_RECIPT',
 CHANGE_CURR_TAB:'CHANGE_CURR_TAB'
}

//mutations.js
import mutationTypes from '@/store/mutationTypes.js'

const mutations = {
 [mutationTypes.ADD_NEW_RECIPT](state, item) {
 state.recipeList.push(item);
 },
 [mutationTypes.CHANGE_CURR_TAB](state, index) {
 state.currRecipe=index;
 }
 }
;
export default mutations

import mutationTypes from '@/store/mutationTypes.js'

const actions = {
 add_new_recipt:({commit,state}, type)=>{
 commit(mutationTypes.ADD_NEW_RECIPT,type);
 },
 change_curr_tab:({commit},index)=>{
 commit(mutationTypes.CHANGE_CURR_TAB,index)
 }
};

export default actions

從上面的例子可以看出，action和mutation使用的是同一個(gè)常量表，可以更好的管理我們的修改動(dòng)作，而不會(huì)出現(xiàn)對(duì)不上的錯(cuò)誤；

最后，我們?cè)诮M件內(nèi)引入vuex中存放的state和action，如下

import {mapActions, mapState} from 'vuex'
...
computed: {
 ...mapState({
 recipeList: state => state.recipeList,
 currRecipe: state => state.currRecipe
 })
 },
methods: {
 ...mapActions([
 'add_new_recipt',
 'change_curr_tab'
 ]),
 addNewRecipt(type) {
 this.add_new_recipt(type)
 }
 }

這里是推薦大家按照例子中，使用mapActions和mapState以及利用三點(diǎn)擴(kuò)展符來(lái)引入state 和action，state最好存放在組件的computed 屬性內(nèi)，這樣當(dāng)state中的數(shù)據(jù)發(fā)生改變的時(shí)候，也會(huì)實(shí)時(shí)的修改computed里定義的變量值，來(lái)實(shí)現(xiàn)數(shù)據(jù)的綁定，同時(shí)，當(dāng)我們修改了某些數(shù)據(jù)的時(shí)候，也要同步到state中去，這樣數(shù)據(jù)源才可以保持一致性與準(zhǔn)確性；

總結(jié)

寫這個(gè)的時(shí)候，只是給個(gè)思路去搭建自己的工程文件，并不是說(shuō)把所有相關(guān)知識(shí)點(diǎn)都講一遍，需要有一定的相關(guān)知識(shí)，不過(guò)相信還沒(méi)自己搭建過(guò)工程文件的小伙伴會(huì)不知道如何去安排，可以參考參考，這里推薦大家安裝chrome的擴(kuò)展插件Vue.js devtools，可以很有效的幫助我們追蹤數(shù)據(jù)，定位錯(cuò)誤。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com