2021-01-07

vue搭建项目：配置路由；封装axios；引入mockjs；设置bus跨层级通信

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
})