1下載安裝node，node –v檢查是否安裝成功，
2.安裝腳手架npm install -g @vue/cli
3.創建專案vue create hello-vue,然后啟動專案 npm run serve
4.配置路由：
(1).安裝vue-router(npm install vue-router);main.js引入如下
Impot router form ‘vue-router’
Import Vue from ‘vue’
Vue.use(router)
(2).新建路由router.Js
Const router = new router(
{
Path:’/config/alarm’,
Name:’config.alarm’,
Component: ()=> import(‘./views/config/alarm.vue’)
})
export default router
(3).App.vue里面引入路由
5.封裝axios(npm install axios)到http.Js檔案,然后引到vue實體中
(1)
Import axios from ‘axios’
Class axiosHttp {
get(url ,params){
return new Promise(()=>{
axios({
url: url,
method:’get’,
params,
withCredentials: true,
header,
}).then(res=>{
Resolve(res)
}).catch(err=>{
})
})
},
post(url ,data){
return new Promise(()=>{
axios({
url: url,
method:’post,
data: data,
withCredentials: true,
header,
}).then(res=>{
Resolve(res)
}).catch(err=>{
})
})
},
}
expor default axiosHttp
(2) main.js引入http.js
Import axiosHttp from ‘http.js’
Vue.prototype.http = axiosHttp;
6.引入mockjs,新建mock檔案夾
（1）安裝mockjs npm install mockjs
(2) mock檔案夾下新建index.js引入mockjs
Import Mock from ‘mockjs’
Import User from ‘./user’
Mock.mock(‘/getList’,User.info)
user.js 內容如下：
let Uer={
info:{
name: ‘zhangsan’,
age: ’12’
}
}
export default User
(3).在alarm.vue檔案請求‘/getList’介面可以獲取到User資料
this.get(‘/getList’).then((res)=>{
let data = res;
})
7.引入bus，vue之間的通信有vuex， bus，$emit（只能用于父子組件的通信） main.js引入bus：
this.prototype.$bus=new Vue();
bus使用：
this.bus.$emit(‘alarmLevel’,’2234’)
接收：
this.bus.$on(‘alarmLevel’,(id)=>{
this.id =id
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/246244.html
標籤：其他
上一篇：iOS自定義相機（帶拍攝區域邊框、半透明遮罩層、點擊螢屏對焦、自動裁剪）： 1、身份證正反面相機（加一個長方形的框框并裁剪身份證照片） 2、手持證件照相機（含demo原始碼）