（七）vite 按需引入vant

最新推荐文章于 2024-05-24 17:15:44 发布

一只卑微的菜狗

最新推荐文章于 2024-05-24 17:15:44 发布

阅读量690

点赞数

分类专栏：仿饿了么项目文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/weixin_44805589/article/details/130693521

版权

仿饿了么项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

全局注册组件

import 需要的组件局部注册
import 组件样式 <script setup>
使用 app.use 注册组件

步骤：

在 main.ts 引入组件，局部注册

import { Tabbar, TabbarItem } from 'vant';

引入组件样式
```
import "vant/lib/index.css";
```

使用app注册组件

/* 注册组件 */
app.use(Tabbar)
app.use(TabbarItem)

使用组件

   // 全局注册组件后
    <VanTabbar v-model="active">
        <VanTabbarItem name="home" icon="home-o">首页</VanTabbarItem>
        <VanTabbarItem name="order" icon="bars">订单</VanTabbarItem>
        <VanTabbarItem name="me" icon="user-o">我的</VanTabbarItem>
    </VanTabbar>

    // 未全局注册组件前
    <!-- <Tabbar v-model="active">
        <TabbarItem name="home" icon="home-o">首页</TabbarItem>
        <TabbarItem name="order" icon="bars">订单</TabbarItem>
        <TabbarItem name="me" icon="user-o">我的</TabbarItem>
    </Tabbar> -->

按需引入组件样式

需要用到插件 unplugin-vue-components ，会比较麻烦，对业务对要求不那么高，尽量不用。按需引入最大好处就是减少部分代码体积

安装插件
在 vite.config.js 中配置插件
直接在模板使用 vant 组件
引入函数组件的样式（函数组件：如totast，dialog那种需要写到js里的组件是函数组件），可以在入口文件 / 公共文件里引入函数组件样式

步骤：

安装
```
 npm i unplugin-vue-components -D
```

在vite.config.js 配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// 主要是下面这两行
import Components from "unplugin-vue-components/vite"
import { VantResolver } from "unplugin-vue-components/resolvers"

// https://vitejs.dev/config/
export default defineConfig({
  // 以及这里的Components
  plugins: [vue(), vueJsx(),Components({
    resolvers: [VantResolver()],
  })],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }, 
  // 配置vite请求代理
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8000',
      '/imgs': 'http://localhost:8000',
    }
  }
})