Vue3.0——公共数据配置、网络配置、插件配置——use语法、路由配置

目录

一、公共数据配置

二、网络配置

1、代理配置:

2、网络配置:

三、插件配置——use语法

三、路由配置


一、公共数据配置

Vue3.0中setup中没有了this,那么有些东西配置到原型链上,就没有意义了

就需要配置全局

app.config.globalProperties.$shuju=公共数据   //对整个应用的配置

因为v2使用公共配置时一般绑定在原型上无论是否使用都在每一个组件的this链上,这样的设计不太友好,

v3提供了专门公共数据配置的方式:

globalProperties getCurrentInstance(获取当前组件)

钩子函数中才能获取实例,普通函数不行,会返回nulll

如果使用的是setup语法糖,getCurrentInstance就只能在

main.js

import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
app.config.globalProperties.$shuju="200"
app.config.globalProperties.rank="2"
app.mount("#app")

App.vue


二、网络配置

1、代理配置:

//vite环境:vite.config.js
export default defineConfig({
	plugins: [vue()],
	server: {
		// port:"8080",
		// host
		proxy: {
			'/api': {
				target: 'http://127.0.0.1:7001', // 代理的目标地址
				rewrite: (path) => path.replace(/^\/api/, '/'), // 路径重写
				changeOrigin: true,
				// secure: true, // target是否https接口
				// ws: true, // target是否代理websockets               
			}
		}
	}
})

//webpack环境不变: vue.confige.js
module.exports={
	lintOnSave:false,
	devServer:{
		port:"10086",
		host:"localhost",
		proxy:{
			"/":{
				target:"http://127.0.0.1:7001",
				changeOrigin:true,
				pathRewrite:{"^/":""}
			}
		}
	}
}

2、网络配置:

//mian.js
import axios from "axios"
const app=createApp(App)
axios.defaults.baseURL="http://127.0.0.1:7001/api"
app.config.globalProperties.$axios=axios
app.config.globalProperties.hqyj=666
app.mount('#app')

//组件.vue

                    
                    

你可能感兴趣的:(javascript,前端,vue.js,网络,vue)