沒(méi)做過(guò)web開(kāi)發(fā)的,還是用一天時(shí)間學(xué)習(xí)一下vue.js,以便以后配合golang寫(xiě)些簡(jiǎn)單的web程序。
學(xué)習(xí)vue.js
vue.js的入門(mén)就不寫(xiě)筆記了實(shí)在是懶得寫(xiě),網(wǎng)上一堆文章直接搜索出來(lái)看看就好,同時(shí)可以配合element-ui做些測(cè)試。
本來(lái)看見(jiàn)web前端開(kāi)發(fā)就挺煩的,一大堆亂七八糟的東西,傳說(shuō)中簡(jiǎn)單的vue也動(dòng)不動(dòng)就一堆什么全家桶,動(dòng)手是最好的學(xué)習(xí)方法,稍微學(xué)習(xí)感覺(jué)vue確實(shí)挺簡(jiǎn)單方便,當(dāng)然真正使用時(shí)應(yīng)該還是挺多坑。
參考文章:
搭建vscode+vue環(huán)境
這可能是vue-cli最全的解析了……
Vue2全家桶之一:vue-cli(vue腳手架)超詳細(xì)教程
基于vue-cli快速構(gòu)建
以及:
Vue官網(wǎng)文檔
Vue CLI 官網(wǎng)文檔
Element UI官網(wǎng)文檔
源碼:
一個(gè)后臺(tái)管理demo
類(lèi)似餓了么官方客戶端
樓上客戶端的后臺(tái)管理器
Vue2 后臺(tái)管理系統(tǒng)解決方案
Vue Element Admi 這個(gè)star最多
附神圖一張(點(diǎn)擊后查看原圖):
mpvue和微信原生小程序開(kāi)發(fā)
測(cè)試了一下mpvue開(kāi)發(fā)小程序,發(fā)覺(jué)對(duì)于vue新手和小程序新手還不如直接使用小程序原生開(kāi)發(fā)來(lái)的好,一個(gè)是還得去熟悉小程序開(kāi)發(fā)文檔,遇到坑更不容易解決,一個(gè)是mpvue下面編譯到真機(jī)測(cè)試速度遠(yuǎn)沒(méi)有原生的快,一個(gè)是我想以后原生的開(kāi)發(fā)會(huì)越來(lái)越強(qiáng)大怕mpvue跟不上。
安裝和使用axios
$ cnpm install axios
main.js文件:
import axios from 'axios'
Vue.prototype.$axios = axios
這樣就可以使用this.$axios來(lái)調(diào)用axios,使用例子參考下面跨域。
跨域
1. 本地服務(wù)器開(kāi)發(fā)環(huán)境,添加proxyTable代理:
修改config/index.js文件:
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: { //修改這里
'/bd': {
target: 'https://www.baidu.com',
secure: true, //https必須添加這個(gè)設(shè)置
changeOrigin: true,
pathRewrite: {
'^/bd': ''
}
}
},
做了以上修改以后需要重啟服務(wù)器:npm run dev
調(diào)用
調(diào)用時(shí)可以直接使用'/bd',會(huì)被自動(dòng)替換為上面定義的target地址,調(diào)用例子:
App.vue文件:
methods: {
getBd (event) {
this.$axios.get('/bd')
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
})
}
}
2. 生產(chǎn)環(huán)境
因?yàn)樵陂_(kāi)發(fā)環(huán)境我們一般直接使用npm run dev啟動(dòng)內(nèi)置的服務(wù)器,而以上修改proxyTable的方法應(yīng)該就是修改這個(gè)本地服務(wù)器的配置讓其訪問(wèn)該代理地址時(shí)自動(dòng)加上跨域功能。
而生產(chǎn)環(huán)境則不然,服務(wù)器一般是另外的比如使用nginx,此時(shí)修改nginx的跨域配置就可以了?;蛘遟olang gin寫(xiě)的服務(wù)器,那么就在代碼中加上跨域支持?;蛘咭L問(wèn)第三方網(wǎng)站,那么直接使用后端編程語(yǔ)言比如go去跨域訪問(wèn),其實(shí)說(shuō)白了跨域跟客戶端沒(méi)什么關(guān)系都是服務(wù)器的事。
生產(chǎn)環(huán)境還沒(méi)測(cè)試,等以后驗(yàn)證再補(bǔ)充修改。