基于Vue的前端架构，我做了这15点
前言
由于 vue3.2 版本的发布，
4.4 封装 SVG 的图标组件
svg 图标比较小，而且都是可读的 xml 文本，所以我们把它直接放在项目中即可，通过 vite-plugin-svg-icons 插件，实现自动引入 svg 图标。
配置 vite.config.ts：
plugins: [
viteSvgIcons({
iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
symbolId: 'icon-[dir]-[name]',
}),
]
封装一个 vue 组件：
首先将下载的 .svg 图标放入 @/assets/icons 文件夹下
- name 放置在 @/assets/icons 文件夹下的文件名。
- color 颜色填充，使用此项会默认覆盖图标颜色。
5.按需自动引入组件
unplugin-vue-components 是一款非常强大的插件（极力推荐），核心功能就是帮助你自动按需引入组件，Tree-shakable，只注册你使用的组件。这里说一下他的两个核心使用方式和配置方式。
此插件不仅支持 vue3，同时也支持 vue2，并且支持 Vite、Webpack、Vue CLI、Rollup。
5.1 安装与配置
安装：
npm i unplugin-vue-components -D
配置：
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({ /* options */ }),
],
})
这里的 options 可以配置一些选项，后面提到的组件库注册会使用到。
5.2 改变全局组件注册方式
我们通常将全局的组件封装在 @/src/components 中，然后通过 app.component() 注册全局组件。使用此插件后，无需手写注册，直接在模板中使用组件即可：
这里引入官方的示例：
自动编译为：
5.3 自动引入组件库
在使用组件库时，常规组件我们也会注册到全局，如果使用局部注册由于页面中会使用到多个组件，会非常麻烦，所以这个功能绝佳，例如我们使用 ant-design-vue 组件库。
直接在模板中使用即可，无需手动注册或局部引用：
按钮
当然，你还需要在 vite 中引入它的解析器：
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
Components({
resolvers: [
AntDesignVueResolver(),
]
})
],
})
目前支持的解析器，根据你的喜好去选择：
- Ant Design Vue
- Element Plus
- Element UI
- Headless UI
- IDux
- Naive UI
- Prime Vue
- Vant
- VEUI
- Varlet UI
- View UI
- Vuetify
- VueUse Components
- Quasar
6.样式
项目中最好使用通用样式，可以创建 src/styles 目录存放，这里推荐一些分类：
styles
├── antd # 组件库样式覆盖，命名自取，这里以 ant design 为例
├── color.less # 颜色
├── index.less # 入口
├── global.less # 公共类
├── transition.less # 动画相关
└── variable.less # 变量
6.1 预设基础样式
相信用过 normalize 的同学不在少数，它可以重置 css 样式，使各浏览器效果保持一致。后面的章节会提到 tailwind.css，它内置了预设样式重置的功能，与 normalize 还是有一定的区别，有兴趣的同学可以了解一下。
6.2 CSS 预处理器
虽然 vite 原生支持 less/sass/scss/stylus，但是你必须手动安装他们的预处理器依赖，例如：
npm install -D less
如何选择预处理器？
推荐使用你是所使用的组件库的样式语言，因为 css 预处理器学会一种后，入手其他几乎没有学习成本。
6.3 开启 scoped
没有加 scoped 属性，会编译成全局样式，造成全局污染。
6.4 深度选择器
有时我们可能想明确地制定一个针对子组件的规则。
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。
7.布局
页面整体布局是一个产品最外层的框架结构，往往会包含导航、页脚、侧边栏等。在页面之中，也有很多区块的布局结构。在真实项目中，页面布局通常统领整个应用的界面，有非常重要的作用，所以单独拆分出来也是非常有必要的。
在脚手架中，所有的通用布局组件都应该放在 src/layouts 中，这种封装比较简单，这里就不贴代码了，大家按照自己实际情况自行发挥，在此仅提供一下封装思路。
7.1 常规的布局
BasicLayout
基础页面布局，包含了头部导航，侧边栏等。
BlankLayout
空白的布局。
7.2 特殊的布局
RouteLayout
如果你的项目在路由切换中需要对某些二级页面进行缓存，那么推荐你创建一个 RouteLayout，通过路由 meta 中的配置，返回 router-view 或者使用 keep-alive 包裹的 router-view。
UserLayout
用于用户登录注册等页面抽离出来。
PageLayout
基础布局，包含了面包屑等信息，内含 slot。
8.集成 Tailwind.css
Tailwind.css 在我第一次看到它的时候，内心是比较反感的，但实际上手之后又觉得真香。从 vue2 项目中，我已经引入了 tailwind，整体的开发结果就是，基本很少再使用