Vue3 项目初始化

1. 一般用vite来初始化项目，首先下载vite

npm install -g create-vite-app # 传统方法

 2. 创建项目

npm init vite-app new_project # 传统方法

3. 安装依赖

# 1. 路由是多页面必须安装的 vue-router
npm i vue-router

# 2. ui可以随机选择，比较推荐 element ui
npm i element-plus

# 3. 网络访问
npm i axios

# 4. 数据存储 + 持久化 之前是vuex， 现在推荐
npm i pinia
npm i  pinia-plugin-persistedstate


# 5. 最终安装所有依赖
npm install

4. 路由构建，首先确定自己要写多少个界面，每个界面多少个变动的位置，确定以后在纸上画出具体图例，然后创建路由文件夹，根据自己写的路由进行创建，后续将不在对此进行管理，一步到位。

import {createRouter, createWebHistory} from "vue-router"
import Home from "@/view/home.vue"
// 路由配置
const routes=[
	{
		path:"/",
		component:Home
	},

]
// 创建路由
export const router=createRouter({
	routes,
	history:createWebHistory()
})

// 鉴权
const whitelist=[
    "/login",
    "/reg"
]
router.beforeEach((to,from,next) => {
    const store=useStore();
    if(!whitelist.includes(to.path)&&store.isLogin===false){
        next("/login")
    }else{
        next()
    }
})

5. 网络访问构建，当先开发ui时候，建议使用mock，模拟数据让界面全部显示出来，后续用axios创建api文件夹，并且在里面分别对后端接口按照mock数据结构对网络接口进行编写，这部分要跟后端沟通清楚，你要一个人开发就自己设计接口。

6. 数据存储拟构建，每个界面需要的数据不一样，需要存储的数据也不一样，先创建出来大体框架，后续需要什么数据在向里面加入即可。

7. 全部依赖引入代码，将上述所做配置引入到主程序中，让代码加载上述配置，简单的项目即可配置成功。

8. 项目编译及部署，在开发完成以后对项目进行打包，并且发布，需要进行如下配置，防止路径出现其他问题。

此部分在今晚6点之前完成，6点后开始开发具体代码，12点以后开始开发后端程序。