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

C_心欲无痕

已于 2024-07-23 17:46:36 修改

阅读量1.5k

点赞数 1

文章标签： vue.js javascript elementui

于 2022-02-20 14:54:46 首次发布

本文链接：https://blog.csdn.net/qq_43886365/article/details/123030691

版权

文章目录

1，安装

Element-ui：

npm i element-ui -S    或 yarn add element-ui

Vant：

npm i vant  或 yarn add vant

2，安装按需引入组件插件

Element-ui：

npm install babel-plugin-component -D

Vant：

npm i babel-plugin-import -D

在这里插入图片描述

3，在babel.config.js里面新增配置项

在这里插入图片描述
详细配置如下：

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    // 按需引入element-ui
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],

    // 按需引入Vant
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
};

4，在src下面新建一个配置文件进行统一管理

在这里插入图片描述
详细代码如下：

elementUI.js 想要那个组件可以新增

import Vue from 'vue'
import {
    Form,
    FormItem,
    Tabs,
    TabPane,
    Tree,
    Alert,
    Slider,
    Icon,
    Upload,
    Progress,
    Loading,
    MessageBox,
    Message,
    Notification,
} from 'element-ui'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Tree)
Vue.use(Alert)
Vue.use(Slider)
Vue.use(Icon)
Vue.use(Upload)
Vue.use(Progress)
Vue.use(Image)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

2，Vant.js 想要那个组件可以新增

import Vue from 'vue'
import {
    Tab,
    Tabs,
    Uploader,
    NavBar,
    Icon,
    ActionSheet,
    Picker,
    Popup,
    Dialog,
    Overlay,
    Loading,
    Checkbox,
    Badge,
    Image as VanImage,
    Lazyload,
    List,
    Empty,
    Slider,
    Field,
    NoticeBar, 
} from 'vant'

Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Uploader)
Vue.use(NavBar)
Vue.use(Checkbox)
Vue.use(Loading)
Vue.use(Overlay)
Vue.use(Popup)
Vue.use(ActionSheet)
Vue.use(Icon)
Vue.use(Picker)
Vue.use(Dialog)
Vue.use(Badge)
Vue.use(Empty)
Vue.use(List)
Vue.use(Lazyload)
Vue.use(VanImage)
Vue.use(Field)
Vue.use(Slider)
Vue.use(NoticeBar)