vue-cli3 同时按需引入vant和element ui

最新推荐文章于 2024-07-31 20:12:09 发布

黄三狗

最新推荐文章于 2024-07-31 20:12:09 发布

阅读量4.8k

点赞数

分类专栏： vue-cli 文章标签： vue-cli3

本文链接：https://blog.csdn.net/baidu_38760069/article/details/104253932

版权

本文介绍了如何在vue-cli3项目中同时按需引入Vant和Element UI组件库。步骤包括安装两个库，配置按需引入插件，修改babel.config.js文件，并创建vant.js和elementui.js来引入特定组件。

摘要由CSDN通过智能技术生成

一、安装vant和element ui

1.安装vant

# 通过 npm 安装
npm i vant -S

# 通过 yarn 安装
yarn add vant

2.安装element ui

npm i element-ui -S

二、配置按需引入插件

1.vant

npm i babel-plugin-import -D

2.element ui

npm install babel-plugin-component -D

ps：这里将同一个命令写两遍，是因为我遇到了按需引入element ui后，在引入vant时不生效，当我重新执行了“①安装vant；②配置按需引入；”后，引入vant才生效。

三、babel.config.js

配置方式一：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }],
      [
        "component",
        {
          "libraryName": "element-ui"