vue3__完整创建项目以及配置代理打包，以及根据配置去打包

一、创建vue3项目

这里我们使用vue3+js+router+pinin+axio

 1.进入你想要创建项目的目录中

 cd E:\

 e:

2.创建 vue3项目，安装创建项目

E:\>npm create  vite vue3_project
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in E:\vue3_project...

Done. Now run:

  cd vue3_project
  npm install
  npm run dev

启动项目 

npm install

npm run dev

 

 3.安装其他插件

3.1安装npm i vue-router@4

        a.路由配置，router/index.js

//1、导入vue-router相关函数
import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
import index from '../views/index.vue'
import test from '../views/test.vue'
import home from '../views/home.vue'
// 2、路由对象实例化 
const router = createRouter({
    //   history: createWebHistory('/assp_wx'), //一般写项目名称
    history: createWebHashHistory(import.meta.env.BASE_URL),
    //路由规则
    routes: [
        {
            path: '/index',
            name: 'index',
            component: index,
            meta: {
                keepAlive: false
            }
        },
        {
            path: '/test',
            name: 'test',
            component:test,
            meta: {
                keepAlive: false
            }
        },
        {
            path: '/home',
            name: 'home',
            component: home,
            meta: {
                keepAlive: false
            }
        },
        {
            path: '/',
            redirect:"/home"
        }
    ]
})

//前置路由守卫
// router.beforeEach((to,from,next)=>{
//     //这里做路由鉴权处理成功使用next()跳转
//     next()
// })

//导出路由
export default router

         b.main.js 里面引入路由文件

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"

export const app = createApp(App)

app.use(rout