Vue3.0+Vant ui配置按需引入(非vue-cli3.0)

简介: 笔记

1.jpg


1. 说在前面


1.1 这是一件令我比较无语的事情


最近使用 Vue3.0 + vant开发项目,官网上的配置,按需引入其实不太好理解

于是想着“面向百度编程”,百度下看看,结果网上有很多人连Vue3.0和vue-cli3.0都分不清楚,找了半天都是vue-cli3.0的(有同感的可以评论区扣个1)我人都傻了,于是自己摸索了一个正确的操作方式

1.2 Vant ui简介


Vant 适用于移动端

Vant 是有赞前端团队开源的移动端组件库,十大受欢迎组件库之一,用户量挺大的,10w+(所以生态还是不错的)

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。


2. Vant ui安装



2.1 npm安装

# Vue 2 项目,安装 Vant 2
npm i vant@2
# Vue 3 项目,安装 Vant 3
npm i vant@3

2.2 其它安装方式

# 通过 yarn 安装
yarn add vant@3
# 通过 pnpm 安装
pnpm add vant@3


3. 配置按需引入



3.1 webpack依赖

  • 通过 babel 插件按需引入组件(与element ui 同)
# 安装插件
npm i babel-plugin-import -D
  • 在.babelrc 或 babel.config.js 中添加配置(项目中没有的话自己建立一个)
module.exports = {
  "plugins": [
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

3.2 Vite构建的项目

  • 在 Vite 项目中按需引入组件
# 安装插件
npm i vite-plugin-style-import -D
  • vite.config.js文件配置
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
export default {
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style`,
        },
      ],
    }),
  ],
};


4. 配置main.js(官网上说的估计小白看不懂)



  • 与Vue2.x 的通过Vue.use(某组件)不同
  • Vue3.0的组件注册需要通过 createApp(App)
  • 这里配置了按需引入,注释也写了,很明朗(如下:)
import { createApp } from 'vue'
import App from './App.vue'
// 需要啥组件就引进来
import { Button, Rate } from 'vant'
let app = createApp(App)
// 这里与Vue2中的Vue.use()不同
app.use(Button)
app.use(Rate)
app.mount('#app')

5. 页面中使用按需引入的组件



  • 这里和element ui一样的,以我刚注册的两个组件使用为例:
<template>
  <div class="hello">
    <van-button type="primary">主要按钮</van-button>
    <van-rate v-model="value" />
  </div>
</template>

效果图如下,搞定:

2.png

目录
打赏
0
0
0
0
8
分享
相关文章
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
57 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
UI-TARS Desktop 是一款基于视觉语言模型的 GUI 代理应用,支持通过自然语言控制电脑操作,提供跨平台支持、实时反馈和精准的鼠标键盘控制。
534 17
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
783 4
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
84 3
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
816 0
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
315 0
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
274 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
UI 框架:nav-ui&uni-ui&vant
本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法,包括图标、表格和树的使用示例,以及如何在项目中安装和配置这些UI组件。对于`nav-ui`,详细说明了图标组件的安装与使用,包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后,`vant`部分提供了从项目创建到组件安装的具体步骤,以及如何将下载的组件正确地集成到项目中。
203 4
|
4月前
|
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
45 0

热门文章

最新文章

  • 1
    用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
    89
  • 2
    UI-TARS:字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
    50
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 4
    移动端UI名词 - AxureMost
    3
  • 5
    unity判断鼠标在不在UI上
    14
  • 6
    ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
    12
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    9
  • 8
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    6
  • 9
    iframe嵌入页面实现免登录思路(以vue为例)
    9
  • 10
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    15
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等