基于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,整体的开发结果就是,基本很少再使用