最近由於公司需要,一直在專研vue和element,vue和bootstrap的用法,以下是我開發中所牽扯到的,希望對友人們有所幫組。
vue和必須依賴安裝,在此略過(大家都輕鬆可以搞定噠)
axios跨域設置
打包相對路徑設置
config/index.js
assetsPublicPath: '/web/',
build:{
assetsPublicPath: '/web/',
}
步入正題,頁面開發,接口渲染
關於組件
當時糾結點在於全局組件和局部組件,開始老想着PHP一體網站那樣,公共頭部、底部、主題,後來繞了好久,決定用局部組件,一路下來,局部組件確實靈活好用
局部組件添加步驟
1、src/components mkdir common/top.vue
2、目標home.vue文件引入組件:
import ctop from '@/components/top'
渲染組件:
<ctop></ctop>
跨域請求數據渲染
1、搞清楚三個常用設置
//模板渲染,數據綁定
data(){
return {
str:'',//單變量
arr:[],//數組
arrs:{},//多維數組,即字典
}
},
//方法定義
methods{
democlick(){//類似q點擊事件
},
},
//初始加載
mounted(){
//頁面初始值、初始方法數據獲取和綁定
}
2、路由傳遞參數,最後才明白有兩種
a、路由定義傳參,比如 paht/:id
b、跳轉路由傳參
that.$router.push({
name: 'demo',
params: {
hourseid: that.hid,
type: type,
}
})
二者區別,路由定義傳參,強制刷新,參數依舊可以使用
跳轉路由傳參,刷新後,參數失效,需要藉助於localstorage等