创建VUE项目

vue create 项目名

cd 项目名

安装router、element-plus、axios、vue-axios依赖 

npm install vue-router@4 element-plus axios vue-axios

main.js文件下

// 从vue中导入createApp函数
import { createApp } from 'vue'

import router from '@/routes';

// 导入element-plus
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

import axios from 'axios' ;
import VueAxios from 'vue-axios' ;

axios.defaults.baseURL = '/apis';

import App from './App.vue'

// 创建vue应用
const app=createApp(App);

app.use(ElementPlus);
app.use(router);
app.use( VueAxios , axios );
// 挂载
app.mount('#app');

src下创建routes文件夹,创建index.js文件

// 从vue-Router模块导入create-router函数
import { createRouter,createWebHistory } from "vue-router";
//1. 导入路由组件
import Main from '@/components/start/Main.vue'
import Transaction from '@/components/page/Transaction.vue'
const routes=[
	{
		path:'/start/main',
		name:'main',
		component:Main,
		children:[
			{
				path:'/page/transaction',
				name:'transaction',
				component:Transaction
			}
			
		]
	},
	
];
// 3.创建路由实例
const options={
	routes,
	history:createWebHistory()
}

const router=createRouter(options)
// 导出 router 对象
export default router;

app.vue文件

<template>
	<router-view></router-view>
</template>
<script>
	// import HelloWorld from './components/HelloWorld.vue'

	export default {
		name: 'App'
	}
</script>

<style>

</style>

根目录下创建   vue.config.js  文件

module.exports = {
	lintOnSave: false,
    devServer:{
        proxy: {
            '/apis' : {
                target: 'http://localhost:8088',
                changeOrigin: true,
                pathRewrite: {
                    '^/apis': ''
                }
            }
        }
    }
}