复制代码
自动编译为:
复制代码
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[78]
-
Element Plus[79]
-
Element UI[80]
-
Headless UI[81]
-
IDux[82]
-
Naive UI[83]
-
Prime Vue[84]
-
Vant[85]
-
VEUI[86]
-
Varlet UI[87]
-
View UI[88]
-
Vuetify[89]
-
VueUse Components[90]
-
Quasar[91]
6.样式
项目中最好使用通用样式,可以创建 src/styles
目录存放,这里推荐一些分类:
styles
├── antd # 组件库样式覆盖,命名自取,这里以 ant design 为例
├── color.less # 颜色
├── index.less # 入口
├── global.less # 公共类
├── transition.less # 动画相关
└── variable.less # 变量
复制代码
6.1 预设基础样式
相信用过 normalize[92] 的同学不在少数,它可以重置 css 样式,使各浏览器效果保持一致。后面的章节会提到 tailwind.css,它内置了预设样式重置的功能,与 normalize 还是有一定的区别,有兴趣的同学可以了解一下[93]。
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[94] 在我第一次看到它的时候,内心是比较反感的,但实际上手之后又觉得真香。从 vue2 项目中,我已经引入了 tailwind,整体的开发结果就是,基本很少再使用 <style>
标签去转本定义一些 class 和样式,毕竟起名字这种事,一个是涉及到规范,一个是涉及到英语。如果你选择 tailwind,CSS 预处理器的作用就会显得微乎其微,因为你无需再自定定义各种变量和 mixins。
总体来说,学习成本并不高,花上两个小时足够上手,记住不用死记硬背那些类名。
8.1 效率提升
很多人总是说样式要与 HTML 分离,现在为什么又要提倡 tailwind 这种与 HTML 紧密结合的工具?这是因为现在使用 vue 这类框架已经高度组件化,样式分离是为了方便复用和维护,但在组件化面前样式分离只能是降低开发效率。
下面介绍一下 tailwind 提供了哪些提升效率的功能:
-
提供了大量的功能类,极大的提高了可维护性。
-
响应式设计,各种设备一把梭。
-
悬停、焦点和其它状态。
-
深色模式。
-
支持配置,例如颜色方面很难做到跟你的设计师统一。
-
不用为起名字而纠结???
8.2 JIT 模式
如果你的环境支持 postcss8( vue/cli 构建的 vue2 项目是 postcss7 ),那么 JIT 模式直接带你起飞。
-
超快的构建速度。
-
支持变体,你甚至可以这么写
sm:hover:active:disabled:opacity-75
。 -
支持任意样式,例如
md:top-[-113px]
。 -
开发和生产环境结果是一致的,(我在 vue2 项目中就遇到过组件库构建结果不一致的问题)。
如果你使用 vscode 那你一定要安装 Tailwind CSS IntelliSense[95] 插件,它可以自动补全类名,显著降低学习成本。
8.3 关于打包体积
使用默认配置,未压缩是 3739.4kB ,Gzip压缩 是 293.9kB,Brotli压缩 是 73.2kB。这似乎看起来很大,这是因为 tailwind 提供了成千上万的功能类,其中绝大部分你不会使用到。
当构建生产时,你应该使用 purge 选项来 tree-shake 优化未使用的样式,并优化您的最终构建大小当使用 Tailwind 删除未使用的样式时,很难最终得到超过 10kb 的压缩 CSS。
还有一点,Atom CSS
极大的提升了样式的复用程度