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

本文链接：https://blog.csdn.net/lys1925/article/details/112325953

本文详细介绍了如何搭建Vue.js项目，包括安装Vue CLI、创建项目、配置路由、引入axios进行HTTP请求以及使用MockJS模拟数据。同时，还讲解了Vue组件间通信的实现，如使用bus进行消息传递。最后，展示了vue.config.js的配置方法，包括基本路径、输出目录、代理设置等。

摘要由CSDN通过智能技术生成

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

    }
}