elment-ui vuecli3按需加载

最新推荐文章于 2023-11-06 21:52:15 发布

Weightlessly

最新推荐文章于 2023-11-06 21:52:15 发布

阅读量125

点赞数

分类专栏： vue 文章标签： vue npm js

本文链接：https://blog.csdn.net/weixin_45860674/article/details/114287749

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

安装babel-plugin-component

npm install babel-plugin-component -D

安装@babel/preset-env

npm install @babel/preset-env -D

在package.json同一级文件夹创建babel.config.js（如果已经存在则直接打开），写入以下：

module.exports = {
  presets: [
    '@vue/app',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在views同级目录下找到plugins文件夹下的elment.js,在其中按需引入

import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'


import Carousel from 'element-ui/lib/carousel';
Vue.use(Carousel);
import carouselItem from 'element-ui/lib/carousel-item';
Vue.use(carouselItem);
import button from 'element-ui/lib/button';
Vue.use(button);
import upload from 'element-ui/lib/upload';
Vue.use(upload);
import dialog from 'element-ui/lib/dialog';
Vue.use(dialog);

import pagination from 'element-ui/lib/pagination';
Vue.use(pagination);

import datepicker from 'element-ui/lib/date-picker';
Vue.use(datepicker);
import select from 'element-ui/lib/select';
Vue.use(select);
import option from 'element-ui/lib/option';
Vue.use(option);
import radio from 'element-ui/lib/radio';
Vue.use(radio);
// import Element from 'element-ui';
// Vue.use(Element);