Vue3项目开发流程

一、安装Node环境

安装18.3或更高版本Node.js。

二、创建应用

1.Vite

使用命令npm create vue@latest，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。

2.Vue CLI

使用命令vue create my-project，Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。

更推荐使用Vite创建项目

三、安装组件库

这里推荐使用Element-Plus

# NPM

$ npm install element-plus --save

# Yarn

$ yarn add element-plus

# pnpm

$ pnpm install element-plus

用法

1. 完整导入

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

app.use(ElementPlus)

2.自动导入

先安装unplugin-vue-components 和 unplugin-auto-import这两款插件，然后再vite.config.ts文件中进行配置

四、路由管理

在src/router/index.ts内添加静态路由，配置路由模式为history

或hash。动态路由需要请求后端接口返回，格式要与后端协商好，最后保存到状态管理Pinia中。

在src根目录创建一个ts文件进行全局路由导航守卫管理（前置导航守卫、后置导航守卫）。

前置导航守卫一般处理是否登录、有无权限等判断。

最后在main.ts文件内就行导入，如：import '~/permission'

五、状态管理

推荐使用Pinia

相对于VueX，Pinia中没有了mutations，也不再有 modules 的嵌套结构，仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式，甚至可以拥有 Store 的循环依赖关系。

创建一个Store