Vue - vue 前端项目基础框架搭建流程

1. 初始化项目

pnpm create vue

// 添加路由支持
pnpm add vue-router
// 添加数据状态管理支持
pnpm add pinia

// 添加UI模块支持
pnpm add element-plus
// 添加图标支持
pnpm add @element-plus/icons-vue

// 增加网络请求模块支持
pnpm add axios
// 添加国际化支持
pnpm add vue-i18n

// 添加css预处理器
pnpm add -D sass
// 添加normalize.css 重置css样式
pnpm add normalize.css

// 增加数据模拟模块支持
pnpm add -D mockjs

2. 配置vite.config.js 文件

pnpm add -D plugin-auto-import
pnpm add -D plugin-vue-components

相关组建自动引入

3. 引入normal.css 进行样式重置, , src/store

pnpm add normalize.css

4. 配置I18n， 默认为中文，流程

app.vue 文件修改

src/i18n 文件夹添加

5. 配置路由

src/router/index.js

6. 创建路由对应的视图文件

src/views
登录视图

7. 创建布局文件

src/layout

8. 创建store

src/store

9. 封装mock模拟数据模块

src/mock

10. 封装网络请求模块

src/request

11. 封装自定义表格组件

src/components/

12. 进行业务开发

• 开发api请求
• 开发数据状态业务
• 构建业务相关UI