1、空白框架的搭建要义

这个要义适用于使用各个框架的搭建

图片.png

2、构建和安装

构建项目

// 执行vite构建vue3

yarn create vite

依次输入项目名称、选择vue、typescript进行构建，运行完成后，项目基本框架构建完成

3、安装常用库

一个后台管理系统中，常用的库有如下：

// 路由
yarn add vue-router@4 
// 状态管理 
yarn add pinia 
// 组件库 
yarn add element-plus 
// 网络请求
yarn add axios

而下面的库可以按需引入：

// 使用 less 或 scss 均可简化样式方面的开发，自行选择顺手的即可 
yarn add less 
yarn add less-loader
// 如果需要在前端对数据进行一些复杂操作，loadsh 也是必不可少的存在 
yarn add loadsh 
// qs 库是一个用来序列化 post 请求中的 body 参数的库 
yarn add qs 
// day.js 是用来处理时间格式的库，相比 moment.js 更加的轻量 
yarn add dayjs 
// 如果项目有国际化需求的话需要引入 vue 官方提供的解决方案 vue-i18n 
yarn add vue-i18n
// 图表库，不考虑数据量级的话，该库算是非常新手友好了 
yarn add echart 
// 代码规范的库，好的规范可以让代码有更持久的生命力 
yarn add eslint
// 支持 svg 图标的库 
yarn add vite-plugin-svg-icons -D yarn add fast-glob -D

以上一些库的安装根据实际项目进行选择，安装完成后可以先提交一版到git，方便日后直接使用

之后就是对一些文件修改，进一步完善规范项目信息和适配各个库，包含不限于以下文件：

package.json文件中的项目名称和版本
index.html的网站标题和图标、首屏加载效果
.gitignore里是否需要添加一些匹配的文件来组织提交到git
vite.config.ts配置一些规则，比如绝对路径别名、svg的支持等
tsconfig.json配置绝对路径规则
main.ts导入全局使用的库
创建环境文件 .env

提交代码，就此准备工作结束

src 
|- api 
  |- interceptors // 接口请求封装 
|- assets // 图片等静态资源 
  |- svg // svg 文件 
|- components // 全局组件 
|- consts // 定义一些全局常量 
|- locales // 国际化文件 
|- models // 类型定义文件 
|- router // 路由文件 
|- store // 状态管理文件 
|- styles // 样式文件 
  |- theme.less // element 主题及组件样式修改 
  |- variables.less // 常用样式封装成 class 
|- utils // 通用工具封装 
|- views // 页面文件 
  |- components // 业务组件

vue3初始化框架的搭建

1、空白框架的搭建要义

2、构建和安装

3、安装常用库