?xml version="1.0" encoding="UTF-8"?
首先，闡明一下我是一名iOS開(kāi)人員前酿，學(xué)習(xí)vue完全是因?yàn)轫?xiàng)目需求，期間碰到了好多問(wèn)題，馬馬虎虎建立了一個(gè)中臺(tái)傻咖，雖然寫(xiě)的不是很好，但是作為第一個(gè)用vue開(kāi)發(fā)項(xiàng)目岖研，希望記錄下來(lái)整個(gè)過(guò)程卿操，開(kāi)發(fā)時(shí)候怎么學(xué)習(xí)以及遇到的問(wèn)題，可能大家沒(méi)有遇到過(guò)，不喜勿噴害淤。解滓。。謝謝筝家！
一洼裤、認(rèn)識(shí)vue學(xué)習(xí)vue
用于開(kāi)發(fā)的一門(mén)新的語(yǔ)言我是從官網(wǎng)看的vue的基礎(chǔ)知識(shí)，從而了解vue溪王，只要要怎么寫(xiě)腮鞍，具體的還沒(méi)有深入的去解析，因?yàn)闀r(shí)間的不允許莹菱，快速開(kāi)發(fā)移国，只看結(jié)果。
總結(jié)：vue的界面分為三塊： ? ? ? ?實(shí)際上個(gè)人覺(jué)得就是將html5的開(kāi)發(fā)的模塊兒分開(kāi)（很淺顯的認(rèn)識(shí)道伟，只用于初學(xué)的不懂的迹缀，我也不是很懂），在template里面寫(xiě)布局蜜徽，當(dāng)然js還是在script里面 ?格式實(shí)在style祝懂。
因?yàn)榍岸耸且故窘o用戶看的，所以當(dāng)時(shí)為了能快點(diǎn)把界面搞出來(lái)拘鞋，很迫切的想要知道代碼寫(xiě)在哪兒砚蓬，怎么才能展示出來(lái)呢，這就是下面的流程的介紹盆色，這個(gè)網(wǎng)上有很多灰蛙，給大家一個(gè)鏈接，當(dāng)時(shí)我也是看了這個(gè)才把工程建造出來(lái)的隔躲，http://blog.csdn.net/fungleo/article/details/53171052摩梧，這里面是作者從搭建到開(kāi)發(fā)顯示流程，比較清晰宣旱，為作者打call仅父。但是其中我個(gè)人遇到的問(wèn)題的想說(shuō)一下：
（1）、項(xiàng)目創(chuàng)建之初vue-cli 命令行一鍵創(chuàng)建的時(shí)候有一個(gè)地方是是否需要選擇標(biāo)準(zhǔn)的開(kāi)發(fā)語(yǔ)言响鹃，這個(gè)建議選NO驾霜，因?yàn)楫?dāng)時(shí)我選了yes之后，只要稍微有一點(diǎn)格式的不正確就會(huì)報(bào)錯(cuò)买置，選擇了NO之后粪糙，就不用那么拘束了，也不會(huì)報(bào)錯(cuò)
（2）忿项、上述流程里面的網(wǎng)絡(luò)請(qǐng)求的封裝我覺(jué)得很重要蓉冈，畢竟我們的界面要請(qǐng)求數(shù)據(jù)城舞，官網(wǎng)也好，度娘也好都建議用axios 寞酿，說(shuō)vue-router不在維護(hù)家夺，那么就涉及到了封裝，上述流程作者封裝了一個(gè)不帶請(qǐng)求頭的js伐弹，因?yàn)槲覀兊木W(wǎng)絡(luò)請(qǐng)求是要攜帶頭部信息的拉馋，所以要自己搞，這需要看看axios的介紹以及用法惨好，可以百度煌茴。下面粘貼出我的修改：
// 引用axios
var axios = require('axios')
var CryptoJS = require("crypto-js/core")
var MD5 = require("crypto-js/md5")
var baseUrl = '/v1'
// 封裝axios的get方法post方法put方法等
// 自定義判斷元素類(lèi)型JS
function toType (obj) {
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 參數(shù)過(guò)濾函數(shù)
function filterNull (parameters) {
for (var key in parameters) {
if (parameters[key] === null) {
delete parameters[key]
}
if (toType(parameters[key]) === 'string') {
parameters[key] = parameters[key].trim()
} else if (toType(parameters[key]) === 'object') {
parameters[key] = filterNull(parameters[key])
} else if (toType(parameters[key]) === 'array') {
parameters[key] = filterNull(parameters[key])
}
}
return parameters
}
// 網(wǎng)絡(luò)請(qǐng)求深層封裝
function httpService (method, urlStr, params,flag,success, failure){
// 過(guò)濾函數(shù)??怕有空或者不行的
// if (params) {
//??params = filterNull(params)
//????}
// 需要拼接的頭部信息
var timestampMm = Date.parse(new Date()) // 時(shí)間戳
var timestampTemp = ''+timestampMm
var timestamp = timestampTemp.substring(0,10)
var nonce // 隨機(jī)數(shù)
function MathRand () {
var Num = ''
for (var i = 0; i < 6; i++) {
Num += Math.floor(Math.random() * 10)
}
nonce = Num
}
MathRand()
var Numbers = nonce +??timestamp????// 拼接
var first_md5 = CryptoJS.MD5(Numbers)??????????????// 加密
var first_md5_str = '' + first_md5
var first_md5_upper = first_md5_str.toLocaleUpperCase()???// 轉(zhuǎn)大寫(xiě)
var firstmdStr = '' + first_md5_upper
var linkStr = 'b3c7e662782266fddd6f950059d3b812'
var link_end = linkStr + firstmdStr
var link_end_md = CryptoJS.MD5(link_end)
var link_end_mdStr = ''+link_end_md
var finalStr = link_end_mdStr.toLocaleLowerCase()
var second_md5 = ''+finalStr
// 通過(guò)將相關(guān)配置傳遞給 axios 來(lái)進(jìn)行請(qǐng)求
axios({
// 請(qǐng)求方式
method: method, // 默認(rèn)
// `url`是將用于請(qǐng)求的服務(wù)器URL
url: urlStr,
/// `baseURL`將被添加到`url`前面，除非`url`是絕對(duì)的日川。
// 可以方便地為 axios 的實(shí)例設(shè)置`baseURL`蔓腐，以便將相對(duì) URL 傳遞給該實(shí)例的方法。
baseURL: baseUrl,
// `transformRequest`允許在請(qǐng)求數(shù)據(jù)發(fā)送到服務(wù)器之前對(duì)其進(jìn)行更改
// 這只適用于請(qǐng)求方法'PUT'龄句，'POST'和'PATCH'
// 數(shù)組中的最后一個(gè)函數(shù)必須返回一個(gè)字符串回论，一個(gè) ArrayBuffer或一個(gè) Stream
//????transformRequest: [function (data) {
// 做任何你想要的數(shù)據(jù)轉(zhuǎn)換
//????????return data;
//????}],
// `headers`是要發(fā)送的自定義 headers
headers: {'App-Key':'Holo_WeiXin','Timestamp':timestamp,'Nonce':nonce,'Authorization':'','Signature':second_md5,'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'},
// 拼接到url后面的
params: method === 'GET' || method === 'DELETE' ? params : null,
// `data`是要作為請(qǐng)求主體發(fā)送的數(shù)據(jù)
// 僅適用于請(qǐng)求方法“PUT”，“POST”和“PATCH”
// 當(dāng)沒(méi)有設(shè)置`transformRequest`時(shí)分歇，必須是以下類(lèi)型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream
data: method === 'POST' || method === 'PUT' ? params : null,
cache:false,
//????auth:'',
// `timeout`指定請(qǐng)求超時(shí)之前的毫秒數(shù)傀蓉。
// 如果請(qǐng)求的時(shí)間超過(guò)'timeout'，請(qǐng)求將被中止卿樱。
//????timeout: 2000,
// `withCredentials`指示是否跨站點(diǎn)訪問(wèn)控制請(qǐng)求
// should be made using credentials
withCredentials: false, // default
// “responseType”表示服務(wù)器將響應(yīng)的數(shù)據(jù)類(lèi)型
// 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
})
.then(function (response) {
console.log(response);
success(response)
})
.catch(function (error) {
console.log(error);
});
}
// 返回在vue模板中的調(diào)用接口
export default {
get: function (url, params,flag, success, failure) {
return httpService('GET', url, params,flag,success, failure)
},
post: function (url, params,flag, success, failure) {
return httpService('POST', url, params,flag,success, failure)
},
put: function (url, params,flag, success, failure) {
return httpService('PUT', url, params,flag, success, failure)
},
delete: function (url, params,flag, success, failure) {
return httpService('DELETE', url, params,flag, success, failure)
}
}
大家看到的第四行僚害，這個(gè)就是解決跨域的問(wèn)題，我在進(jìn)行網(wǎng)絡(luò)請(qǐng)求的時(shí)候一直會(huì)遇到這個(gè)問(wèn)題繁调，因?yàn)槲易鰅OS的? ?? 時(shí)候沒(méi)有遇到過(guò)，剛開(kāi)始也不懂最后查才知道靶草，這個(gè)是跨域蹄胰。
等大家做完項(xiàng)目的時(shí)候就會(huì)打包給后臺(tái)讓放到線上的服務(wù)器，但是開(kāi)發(fā)的時(shí)候不用奕翔，這就要分開(kāi)說(shuō)解決這個(gè)跨域的問(wèn)題裕寨。開(kāi)發(fā)環(huán)境下比較簡(jiǎn)單，因?yàn)関ue是基于node的服務(wù)派继，在生成的文件config下面的index.js,找到dev對(duì)應(yīng)的地方宾袜，也就是開(kāi)發(fā)情況的配置里面會(huì)有?proxyTable: {}，這個(gè)就是解決開(kāi)發(fā)環(huán)境下跨域的地方驾窟，這個(gè)意思就是把你要訪問(wèn)的域名代理到本地庆猫，訪問(wèn)的是127.0.0.1：8080，但是實(shí)際上跨域成功訪問(wèn)的是你的域名绅络，我的是這樣的
'/v1': {
target: 'http://api.holo.hk/', // 你接口的域名
secure: false,
changeOrigin: false,
}
而打包完之后呢月培，這個(gè)需要后臺(tái)來(lái)配置反向代理嘁字，我自己用apache虛擬了一個(gè)本地主機(jī)，我就將我需要訪問(wèn)的域名在虛擬的主機(jī)做了代理杉畜，（簡(jiǎn)單說(shuō)一下虛擬本地主機(jī)的流程：
1.命令行執(zhí)行sudo su
2.數(shù)據(jù)電腦的開(kāi)機(jī)密碼
3.進(jìn)入可編輯模式：(我用的xampp的apache)vim /Applications/XAMPP/etc/httpd.conf
你會(huì)看到所有的LoadModule都是打開(kāi)的不用管纪蜒，你要看
# Virtual hosts
Include etc/extra/httpd-vhosts.conf
你要看Include前面有沒(méi)有#注釋，要有的話去掉此叠，要不然沒(méi)辦吧建立虛擬主機(jī)應(yīng)該是纯续，還有要看的是
User xxxxx
ServerAdmin xxxx@holo.hk
這個(gè)是我改過(guò)的，原來(lái)的是 User daemon ?,百度說(shuō)是可以解決forbidden灭袁，要是還不行就看
AllowOverride ?none
Require all denied
?改成
#AllowOverride none
#Require all denied
Order allow,deny
Allow from all
）現(xiàn)在上代碼：
ServerAdminzhoucen@holo.hk
DocumentRoot "/Users/zhoucen/servers"
ServerNamewww.zcshop.com
ErrorLog "/Users/zhoucen/servers/Logs/error.log"
CustomLog "/Users/zhoucen/servers/Logs/access.log"? common
就是這個(gè)地方加上：
到此為止就把代理的配置介紹完畢杆烁，如果后臺(tái)用的其他的服務(wù)器那就讓后臺(tái)自己去配置，本來(lái)這就不是前端做的事简卧。
這樣我覺(jué)得我開(kāi)發(fā)過(guò)程中最重要的事情就講完了兔魂。下面來(lái)討論下開(kāi)發(fā)的文件
很重要的文件：
main.js ?是開(kāi)發(fā)的入口吧，一般的是举娩，我在里面導(dǎo)入全局的變量析校，可以全局使用，比如封裝的網(wǎng)絡(luò)請(qǐng)求铜涉，使用的elementui智玻。
app.vue 這個(gè)就是能夠展示你的視圖的地方，相當(dāng)于你寫(xiě)的那些視圖都是從這里開(kāi)始的芙代。
router.js 這個(gè)很重要吊奢，單頁(yè)面應(yīng)用，這個(gè)路由也就是我們說(shuō)的路徑纹烹，跳轉(zhuǎn)什么的都是根據(jù)他页滚，還有就是一個(gè)路由下面會(huì)有子路由，這就是分層次铺呵。比如說(shuō)你有一個(gè)home.vue,但是home.vue又分了很多的模塊兒裹驰，比如left.vue ,right.vue,top.vue 等等，那就把這個(gè)子模塊兒的路由都放在home的路由下面片挂，這樣就很方便進(jìn)行操作幻林。
數(shù)據(jù)存儲(chǔ)也是我們經(jīng)常用的，我在這里用的是sessionstoreage音念，當(dāng)然這些模塊兒需要導(dǎo)入工程沪饺， npm install 模塊兒的名字。
鉤子也是很重要的闷愤，比如說(shuō)我們登錄之后點(diǎn)擊瀏覽器后退在前進(jìn)又能進(jìn)來(lái)整葡，這是不允許的，所以這個(gè)時(shí)候鉤子就很重要肝谭。全局的鉤子就是這個(gè)作用掘宪。
第一次寫(xiě)記錄蛾扇，很亂，接下來(lái)我會(huì)再次整理魏滚，希望那些遇到跟我一樣情況的能夠從我的經(jīng)歷中解決個(gè)問(wèn)題镀首，大神就別來(lái)了。
