vue优雅按需引入UI库实例

最新推荐文章于 2024-04-22 19:09:27 发布

原创最新推荐文章于 2024-04-22 19:09:27 发布 · 717 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue.js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Vue项目中避免引入冗余的UI库，通过使用babel-plugin-import插件，实现按需加载，提高项目性能。以vantUI为例，展示如何仅引入所需的button组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue项目如何避免引入冗余的UI库，借鉴react中的方法

一、运行` npm i babel-plugin-import -D`命令，安装`+ babel-plugin-import@1.11.0`（版本以实际安装为准）；
二、以vant UI为例：

在这里插入图片描述

这样就可以了，上图我只引入了button

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱吃水果和蔬菜丫

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

脚手架vue-cli3按需引入element ui

;

02-09

1589

一、安装babel-plugin-component： npm install babel-plugin-component -D 二、babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ], plugins: [ [ "compone...

vue 按需引入vant跟全局引入

fengshaopu的博客

06-03

2531

一、按需引入 1.下载插件第一步我们可以先打开vant的官网：vant 然后下载vant 用命令行下载：根据所需去配置：我配置的是vant2 Vue 2 项目，安装 Vant 2： npm i vant -S #Vue 3 项目，安装 Vant 3： npm i vant@next -S 下载好以后我们去vue里面的根目 package.json 里面去看一下下载好了吗 "dependencies": { "axios": "^0.21.1", "core-js": "

参与评论您还未登录，请先登录后发表或查看评论

vue组件按需引入

coding

08-16

1835

参考官网：https://element.eleme.cn/#/zh-CN/component/quickstart 按需引入借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component： npm install babel-plugin-component -D 然后，将 .babelrc 修改为： { "presets": [["es2015", { "modules": f...

vue按需引入ElementUI

liucai1018的博客

05-07

514

1、安装 babel-plugin-component： npm install babel-plugin-component -D 2、babel.config.js文件中，在plugins中添加如下： "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] 3、在mai

Vue - 按需引入element-ui和Vant库

qq_43886365的博客

02-20

1876

按需引入element-ui和Vant库

vue按需引入element-ui组件

weixin_45817240的博客

01-02

713

vue按需引入element-ui组件 1.安装 cnpm i babel-plugin-component -D // 开发依赖 2.在babel.config.js中添加代码，如下： module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ [ "component",...

vue2.0 常用的 UI 库实例讲解

08-28

在Vue2.0开发中，选择合适的UI库能够极大地提高开发效率并提升应用的用户体验。本篇文章将介绍两个常用的Vue2.0 UI库——Mint-UI和VUX，并提供它们的安装和使用方法。 1. **Mint-UI** Mint-UI 是由饿了么团队开发...

在vue项目中引入高德地图及其UI组件的方法

10-18

在引入高德地图和UI组件库后，还需要在Vue项目的webpack配置中进行一些设置。在webpack.base.conf.js文件中，需要找到module.exports对象，并在其外部扩展（externals）对象中添加'AMap':'AMap'。这样做可以确保在...

在Vue项目中引入JQuery-ui插件的讲解

10-17

在Vue项目中引入JQuery-ui插件是前端开发中的一个实用技术点，它可以让我们在使用Vue框架的同时，利用JQuery-ui提供的丰富UI组件和功能。JQuery-ui是基于JQuery的用户界面库，它包括日期选择器、滑块、进度条等许多...

基于Vue3, 使用Naive UI组件库开发的后台管理系统.zip

05-26

总的来说，"基于Vue3, 使用Naive UI组件库开发的后台管理系统.zip"是一个完整的前端项目实例，结合Vue3的最新特性和Naive UI的便利，为开发高效、美观的后台管理界面提供了很好的基础。开发者可以借此学习到现代前端...

在vue2.0中引用element-ui组件库的方法

08-27

在Vue.js框架的2.0版本中，引用Element UI组件库是构建现代化Web应用界面的常用方式之一。Element UI是一套由饿了么前端团队开发的基于Vue2.0的组件库，提供了丰富的界面元素，比如按钮、输入框、表单、表格、分页等...

移动端轻量级 Vue 组件库 NutUI

04-22

特性跨平台，自动转微信小程序组件（稍后上线，敬请期待）全新的架构 30+ 京东移动端项目正在使用参照京东APP 7.0 视觉规范支持按需加载详尽的文档和示例支持定制主题支持多语言（国际化）支持 TypeScript 支持服务端渲染（Vue SSR）单元测试加持配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程

vuetify.zip

05-25

H5项目引入Vuetify所需资源 vuetify.min.css-2.2.26.css vuetify-2.2.26.js

Vue 项目中按需引入 ElementUI

qq_46376192的博客

01-29

549

Vue 项目中按需引入 ElementUI

VUE 项目自动按需导入

最新发布

不想成为可以改变世界的程序员，不是一个好程序员

04-22

1915

你是否有这样的苦恼，每个.vue都需要导入所需的vue各个方法 unplugin-auto-import 库 Vite、Webpack和Rollup的按需自动导入API 本章提供Vite、Webpack中使用说明

vue中全局引入"base-name.vue" 按需引入".vue"（自定义的组件）

Lisunlight的博客

07-28

871

vue的组件均放在 src/components 文件内 1、全局引入（自定义的组件 base-name.vue 使用时<base-name></base-name>即可）自动引入以base-name.vue格式的所有组件（name为自定义的组件名）首先下载lodash即 npm install lodash 然后在main.js中输入 import ...

vue按需引入第三方插件_elementui组件按需引入踩过的坑

weixin_39707612的博客

11-22

3214

import 代码虽然只引入了一个按钮组件，其实build是把整个模块都打包了。根据官网介绍：按需引入借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component：npm install -D babel-plugin-component配置.babelrc文件{ "presets": [["...

Vue 按需引入 Element UI 报错 Cannot find module ‘babel-preset-es2015‘

小天才程序员的博客乐园

02-12

371

Vue 按需引入 Element UI 报错 Cannot find module ‘babel-preset-es2015‘

vue使用element-ui实现按需引入

u011927449的博客

05-22

304

基于Vue的Ui框架饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 MintUi 基于vue 移动端的ui框架 http://element.eleme.io/ element UI的使用： 1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart 2.安装 cnpm i ele.