基於vue-cli快速搭建開發框架（axios,global,vuex,vue-router...）

阿新 • • 發佈：2019-01-06

title: 基於vue快速搭建開發框架

從去年開始接觸vue開發，也從頭到尾經歷了兩個大專案，從搭建專案一點點的也積累了不少經驗，也給自己挖了不少的坑。同樣的，填的坑也不少。今天就總結一下，如何搭建vue前端開發框架。其中涉及的相關技術有：vue-cli腳手架、vuex作為全域性事件、變數的管理，global.js（中小型專案開發時不需要複雜的vuex時使用），vue-router，axios，scss等。

1.使用vue-cli生成webpack專案模板

最新的 vue 專案模板中，都帶有 webpack 外掛，所以這裡可以不安裝 webpack

安裝完成後，可以使用 vue -V （注意 V 大寫）檢視是否安裝成功。

如果提示“無法識別 'vue' ” ，有可能是 npm 版本過低，可以使用 npm install -g npm 來更新版本

生成專案
首先需要在命令列中進入到專案目錄，然後輸入：
```
vue init webpack Vue-Project
```
按照提示項進行設定生成專案即可。
生成之後使用
```
npm install
```
即可安裝依賴
然後啟動專案
```
npm run dev
```
至此，專案的生成就完成了

2.對生成的專案進行配置

剛生成的專案因為通用的原因，所以沒有太多的定製需求，在這裡，我們將vuex，axios，axios二次封裝,global全域性檔案等等設定，加速開發。

（1）axios整合以及二次封裝

執行如下命令安裝axios

npm install -g axios

main.js //安裝axiosimportaxiosfrom'axios'Vue.prototype.axios=axios new Vue({axios //注入axios})

安裝完成之後，先不要急於使用，首先在src目錄下新建api資料夾，同時在api資料夾下新建index.js檔案，對axios進行二次封裝，方便請求。完成之後的專案結構以及index.js的檔案內容如下圖

importVuefrom'vue'importaxiosfrom'axios'
exportdefault {get:function(url,params){returnnew

Promise(function(resolve,reiect){axios.get(url,{params:params}).then((response) => {resolve(response) }).catch((response)=>{reiect(response) }) }) },post:function(url,body,params){returnnewPromise(function(resolve,reiect){axios.post(url,body,{params:params}).then((response) => {resolve(response) }).catch((response)=>{reiect(response) }) }) },delete:function(url,params){returnnewPromise(function(resolve,reiect){axios.delete(url,{params:params}).then((response) => {resolve(response) }).catch((response)=>{reiect(response) }) }) },put:function(url,body,params){returnnewPromise(function(resolve,reiect){axios.put(url,body,{params:params}).then((response) => {resolve(response) }).catch((response)=>{reiect(response) }) }) }}

example

至此，axios的封裝也已完成，下面展示如何去呼叫，以便開發的時候呼叫層次更加鮮明，邏輯更加清晰。

在api資料夾下新建一個javascript檔案，用於存放介面相關資訊和實現邏輯

importVuefrom'vue'importaxiosfrom'./axios'
vargetId="localhost:8080/api/"
exportdefault {getId :function(userid){varparams= {userid:userid }returnapi.get (getId, params) }}

看一下在實際使用中的效果

example

可以發現使用es6的import和export進行模組化之後，就將api介面請求從介面邏輯中分離出來，單獨開發，使得層次更加分明，增加介面的複用率更加方便專案的管理。讓後期專案的管理更加容易。

（2）配置vuex

當你的專案比較複雜，對專案的狀態管理比較複雜時，就需要整合vuex進行專案狀態的管理，整合之後的效果如下

example

因為官網上都有相關配置，就不做詳細說明，需要看檔案內具體內容的可以去專案的github地址進行檢視

(3)global檔案以及全域性方法檔案的建立以及維護

在很多情況下，你的專案都不會那麼的複雜，所以使用vuex反而會增加專案的複雜度，降低你的開發效率，這種時候，就需要我們用一個全域性的js檔案來管理相關的變數（bus），將這些變數統一存放在javascript的全域性global下進行管理，再用專門的檔案對這些變數進行管理，使得專案更加整潔。

建立global.js用來存放全域性變數

example

建立globalFun.js用來專門管理global中的全域性變數

example

如果專案沒有太過複雜的話，這樣的兩個檔案基本可以替代vuex的相關功能，並且這樣使用可以很大程度的降低管理的複雜度，相當實用。
注：在globalFun.js中import global.js在main.js中引入gloablFun.js

建立mainFun.js檔案對全域性方法進行管理
每次開發程式時，總會有很多的全域性方法需要管理，所以乾脆使用一個專門管理全域性方法的檔案進行統一管理。
example

至此，一套相當實用的基於vue-cli的開發框架就配置完成，專案已經上傳到github上，你也可以到github上進行檢視。

基於vue-cli快速搭建開發框架（axios,global,vuex,vue-router...）

title: 基於vue快速搭建開發框架

1.使用vue-cli生成webpack專案模板