vue搭建项目:配置路由;封装axios;引入mockjs;设置bus跨层级通信;vue.config.js配置
1下载安装node,node –v检查是否安装成功。2.安装脚手架npm install -g @vue/cli3.创建项目vue create hello-vue,然后启动项目 npm run serve4.配置路由:(1).安装vue-router(npm install vue-router);main.js引入如下Impot router form ‘vue-router’Import V
·
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:{
code: 200,
id: 110,
msg: 'as',
name: 'zhangSan'
}
}
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
})
8.vue.config.js配置直接上代码
module.exports = {
// 选项
// 基本路径
publicPath: "./",
// 构建时的输出目录
outputDir: "dist",
// 放置静态资源的目录
assetsDir: "static",
devServer: {
port: 5557,
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
proxy: {
'/api': {
target: "http://app.tangshengxifa.com",
changeOrigin: true,
secure: false,
pathRewrite: {
"^/api": ""
}
},
'/foo': {
target: '<other_url>'
}
}, // string | Object
before: app => {}
},
// CSS 相关选项
css: {
loaderOptions: {
less: {
// 这里的选项会传递给 css-loader
}
},
// 为所有的 CSS 及其预处理文件开启 CSS Modules。
// 这个选项不会影响 `*.vue` 文件。
modules: false
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)