Vue3+Vant4.x按需引入和配置主题

小半 • 2024年3月2日下午5:58 • 前端开发 • 阅读 310

安装Vue3

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 JavaScript 和测试支持之类的可选功能提示,如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。我们选择了JavaScript、Router、Pinia 、ESlint 、Prettier。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

> cd <your-project-name>
> npm install
> npm run dev

安装vant

通过 npm 安装

# Vue 3 项目，安装最新版 Vant
npm i vant

通过 yarn 或 pnpm 进行安装：

# 通过 yarn 安装
yarn add vant

# 通过 pnpm 安装
pnpm add vant

按需加载

在基于vite的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。

安装插件

 # 通过 npm 安装
npm i unplugin-vue-components -D

# 通过 yarn 安装
yarn add unplugin-vue-components -D

# 通过 pnpm 安装
pnpm add unplugin-vue-components -D

配置插件

在 vite.config.js 文件中配置插件：

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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

使用组件

在app.vue里面使用

<script setup></script>

<template>
  <van-button type="primary">primary</van-button>
</template>

<style scoped></style>

配置主题颜色

Vant 组件通过丰富的 CSS 变量来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。

创建一个样式文件assets/vant.scss

//自定义主题设置
:root:root {
  --van-button-primary-background: red;
  --van-blue:red;
}

在main.js中引入

import './assets/main.css'
import './assets/vant.scss' //新加
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')