小白历险记03-2023/11/23

最新推荐文章于 2024-09-26 22:28:09 发布

一只规划转行狗的转行日记

最新推荐文章于 2024-09-26 22:28:09 发布

阅读量338

点赞数 6

本文链接：https://blog.csdn.net/TTTT2222111/article/details/134583562

版权

知识点1.配置vite自动按需加载vant组件

优点：按需加载可以减少体积，优化加载性能

目标：注册组件的方式，以及了解TreeShaking的作用

1.什么是tree shaking

移除无用的资源，包括JS代码、CSS文件
- 利用import和export的静态引入的方式

2.按需引入组件样式

安装插件
在vite.config.js中配置插件
直接在模版使用Vant组件

1.在main.TS中按需引入应该加载的组件

import { Tabbar, TabbarItem } from 'vant'
import 'vant/lib/index.css';
使用组件
app.use(Tabbar)
app.use(TabbarItem)

2.在需要使用的地方.vue中使用

每个组件前面加入Van

 <VanTabbar v-model="active">
    <VanTabbarItem name="home" icon="home-o">首页</VanTabbarItem>
    <VanTabbarItem name="order" icon="bars">订单</VanTabbarItem>
    <VanTabbarItem name="me" icon="contact">订单</VanTabbarItem>
  </VanTabbar>

3.使用unplugin-vue-components实现按需加载

作用：unplugin-vue-components 是一个用于自动化将 Vue 组件转换为按需加载的工具

1.首先安装

npm i unplugin-vue-components -D

2.在vite.config.ts配置相关参数

4.项目头部实现

normailze.css
- normalize.css 是一种用于重置和标准化浏览器样式的 CSS 文件。它通过提供一组通用的样式规则，帮助开发者消除不同浏览器之间的默认样式差异，以确保网页在各个浏览器中的呈现效果更加统一和一致
- 使用 normalize.css 可以简化开发过程，避免花费大量时间去处理浏览器的默认样式差异。只需将 normalize.css 文件引入到项目中，并在页面的 <head> 标签中使用 <link> 标签进行链接，即可应用其样式规则。需要注意的是，normalize.css 应该在其他自定义样式文件之前被引入，以确保其样式规则能够正确覆盖默认样

使用方法