一、SPA

　　不是指水療。是 single page web application 的縮寫。中文翻譯為 單頁應用程序 或 單頁Web應用，更多解釋請自行搜索。

　　所有的前端人員都應該明白我們的頁面的 url 構成：http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace

　　如上的 url 由以下部分組成：協議、域名、文件名稱、get參數、錨點

　　1、http:// 規定了頁面采用的協議。

　　2、www.fengcms.com 為頁面所屬的域名。

　　3、index.html 為讀取的文件名稱。

　　4、?name=fungleo&old=32 給頁面通過 GET 方式傳送的參數

　　5、#mylove/is/world/peace 為頁面的錨點區域

　　前面四個發生改變的時候，會觸發瀏覽器的跳轉亦或是刷新行為，而更改 url 中的錨點，并不會出現這種行為，因此，幾乎所有的 spa 應用都是利用錨點的這個特性來實現路由的轉換。以我們的 vue 項目為例，它的本地 url 結構一般為以下格式：http://localhost:8080/#/setting/task，可以明顯的看到我們所謂的路由地址是在 # 號后面的，也就是利用了錨點的特性。（個人理解）

二、RESTful 風格接口

　　實際情況是，我們在前后端在約定接口的時候，可以約定各種風格的接口，但是，RESTful 接口是目前來說比較流行的，并且在運用中比較方便和常見的接口。雖然它有一些缺陷，目前 github 也在主推 GraphQL 這種新的接口風格，但目前國內來說還是 RESTful 接口風格比較普遍。并且在掌握了 RESTful 接口風格之后，會深入的理解這種接口的優缺點，到時候，你自然會去想解決方案，并且在項目中實行新的更好的理念。了解程序開發的都應該知道，我們所做的大多數操作都是對數據庫的四格操作 “增刪改查” 對應到我們的接口操作分別是：

　　post 插入新數據

　　delete 刪除數據

　　put 修改數據

　　get 查詢數據

　　注意：這里是我們約定，并非這些動作只能干這件事情。從表層來說，除get外的其他方法，沒有什么區別，都是一樣的。從深層來說包括 get 在內的所有方法都是一模一樣的，沒有任何區別。但是，我們約定，每種動作對應不同的操作，這樣方便我們統一規范我們的所有操作。

　　假設，我們的接口是 /api/v1/love 這樣的接口，采用 RESTful 接口風格對應操作是如下的：

　　1、get 操作 /api/v1/love：獲取 /api/v1/love 的分頁列表數據，得到的主體，將是一個數組，我們可以用數據來遍歷循環列表

　　2、post 操作 /api/v1/love：我們會往 /api/v1/love 插入一條新的數據，我們插入的數據，將是JOSN利用對象傳輸的。

　　3、get 操作 /api/v1/love/1：我們獲取到一個 ID 為 1 的的數據，數據一般為一個對象，里面包含了 1 的各項字段信息。

　　4、put 操作 /api/v1/love/1：我們向接口提交了一個新的信息，來修改 ID 為 1 的這條信息

　　5、delete 操作 /api/v1/love/1：我們向接口請求，刪除 ID 為 1 的這一條數據

　　由上述例子可知，我們實現了5種操作，但只用了兩個接口地址， /api/v1/love 和 /api/v1/love/1 。所以，采用這種接口風格，可以大幅的簡化我們的接口設計。

三、配置 static 目錄

　　這個目錄比較簡單，一般搞成下面這個樣子：

├── css             // 放一些第三方的樣式文件
├── font            // 放字體圖標文件
├── image           // 放圖片文件，如果是復雜項目，可以在這里面再分門別類
└── js              // 放一些第三方的JS文件，如 jquery

　　你可能很奇怪，我們不是把樣式和 JS 都寫到里面去么，為什么還要在這邊放呢？

　　因為，如果是放在 src 目錄里面，則每次打包的時候，都需要打包的。這會增加我們打包項目的時間長度。而且，一些第三方的文件，我們一般是不會去修改的，也沒必要 npm 安裝，直接引用就好了。你可以根據自己的情況，對這些可以不進行打包而直接引用的文件提煉出來，放在資源目錄里面直接調用，這樣會大大的提高我們的項目的打包效率。

四、封裝 axios 工具，編輯 src/api/index.js 文件

　　首先，我們要使用 axios 工具，就必須先安裝 axios 工具。執行下面的命令進行安裝

npm install axios -D

　　從之前整理的系統結構里，我們新建了一個 src/api/index.js 這個空文本文件，這里，我們給它填寫上內容。

// 配置API接口地址
var root = 'https://cnodejs.org/api/v1'
// 引用axios
var axios = require('axios')
// 自定義判斷元素類型JS
function toType (obj) {return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 參數過濾函數
function filterNull (o) {for (var key in o) {if (o[key] === null) {delete o[key]}if (toType(o[key]) === 'string') {o[key] = o[key].trim()} else if (toType(o[key]) === 'object') {o[key] = filterNull(o[key])} else if (toType(o[key]) === 'array') {o[key] = filterNull(o[key])}}return o
}
/*接口處理函數這個函數每個項目都是不一樣的，我現在調整的是適用于https://cnodejs.org/api/v1 的接口，如果是其他接口需要根據接口的參數進行調整。參考說明文檔地址：https://cnodejs.org/topic/5378720ed6e2d16149fa16bd主要是，不同的接口的成功標識和失敗提示是不一致的。另外，不同的項目的處理方法也是不一致的，這里出錯就是簡單的alert
*/function apiAxios (method, url, params, success, failure) {if (params) {params = filterNull(params)}axios({method: method,url: url,data: method === 'POST' || method === 'PUT' ? params : null,params: method === 'GET' || method === 'DELETE' ? params : null,baseURL: root,withCredentials: false}).then(function (res) {if (res.data.success === true) {if (success) {success(res.data)}} else {if (failure) {failure(res.data)} else {window.alert('error: ' + JSON.stringify(res.data))}}}).catch(function (err) {let res = err.responseif (err) {window.alert('api error, HTTP CODE: ' + res.status)}})
}// 返回在vue模板中的調用接口
export default {get: function (url, params, success, failure) {return apiAxios('GET', url, params, success, failure)},post: function (url, params, success, failure) {return apiAxios('POST', url, params, success, failure)},put: function (url, params, success, failure) {return apiAxios('PUT', url, params, success, failure)},delete: function (url, params, success, failure) {return apiAxios('DELETE', url, params, success, failure)}
}

　　但就是這樣，我們還不能再 vue 模板文件中使用這個工具，還需要調整一下 main.js 文件，我們插入標紅的代碼：

import Vue from 'vue'
import App from './App'
import router from './router'// 引用API文件
import api from './api/index.js'
// 將API方法綁定到全局
Vue.prototype.$api = apiVue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,template: '<App/>',components: { App }
})

　　這樣，我們就可以在項目中使用我們封裝的 api 接口調用文件了。

export default {created () {this.$api.get('topics', null, r => {console.log(r)})}
}

　　注意：webpack代理之后，接口不需要定死，需要改成：（'/api/v1'代理里面的路徑）

// 配置API接口地址
var root = '/api/v1'

　　此外，還要注意一點，就是this重定向的問題

var v = this
v.$api.get('topics', null, function (r) {v.list = r.data
})

五、公用工具函數

　　我們可以獨立出來寫一個方法，然后在所有的地方都可以使用，這樣就比較方便了。我們建立了一個 src/utils/index.js 的空文本文件，我們編寫src/utils/index.js 文件

export default {goodTime (str) {let now = new Date().getTime()let oldTime = new Date(str).getTime()let difference = now - oldTimelet result = ''let minute = 1000 * 60let hour = minute * 60let day = hour * 24let month = day * 30let year = month * 12let _year = difference / yearlet _month = difference / monthlet _week = difference / (7 * day)let _day = difference / daylet _hour = difference / hourlet _min = difference / minuteif (_year >= 1) {result = '發表于 ' + ~~(_year) + ' 年前'} else if (_month >= 1) {result = '發表于 ' + ~~(_month) + ' 個月前'} else if (_week >= 1) {result = '發表于 ' + ~~(_week) + ' 周前'} else if (_day >= 1) {result = '發表于 ' + ~~(_day) + ' 天前'} else if (_hour >= 1) {result = '發表于 ' + ~~(_hour) + ' 個小時前'} else if (_min >= 1) {result = '發表于 ' + ~~(_min) + ' 分鐘前'} else {result = '剛剛'}return result}
}

　　寫好代碼之后，我們保存文件。但是此時，我們還不能使用我們的這個方法函數。我們必須在 main.js 中將我們的方法函數給綁定上。如下代碼：

// 引用工具文件
import utils from './utils/index.js'
// 將工具方法綁定到全局
Vue.prototype.$utils = utils

　　還記得我們先前是如何將我們的接口請求函數給綁定上的嗎？這里其實是采用了同樣的方法。這樣，我們寫的這個函數，就可以隨便被我們調用了。我們再來修改一下我們的 index.vue 中的代碼，將 time 調整為：<time v-text="$utils.goodTime(i.create_at)"></time>

　　我們在 script 區域，引用一個函數是使用 this.getData 或者 this.list 這樣的代碼引用的。但是在 template 中，我們是不加 this 的。

六、去掉 map 文件

　　當我們npm run build的時候，會生成了一些 .map 的文件，當我們的項目變得比較大的時候，這些文件第一個是非常大，第二個編譯時間非常長。所以，我們要把這個文件給去掉。

　　我們編輯 /config/index.js 文件，找到其中的

productionSourceMap: true,
//修改為：
productionSourceMap: false,

　　重新運行打包命令，沒用的 map 文件已經沒有了。

轉載于:https://www.cnblogs.com/goloving/p/8904042.html

總結

以上是生活随笔為你收集整理的vue项目构建实战基础知识：SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。