vue项目elment按需导入

vue项目elment按需导入

1.开发环境 vue+element
2.电脑系统 windows10专业版
3.在使用 vue+element开发的的过程中,我们可能只是使用element-ui的几个组件,如果我们把整个element-ui引入的话,就会导致项目过大。下面是element-ui按需导入的方法,希望对你有所帮助。
4.在终端执行命令:

npm add element-ui
npm install babel-plugin-component -D

5.在babel.config.js添加如下代码:
vue项目elment按需导入_第1张图片

module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins":[
    [
      "component",
      {
        "librayName":"element-ui",
        "styleLibraryName":"theme-chalk"
      }
    ]
  ]
}

6.在main.js中添加如下代码:

import {Button,Progress} from 'element-ui';
Vue.use(Button);
Vue.use(Progress);

7.在vue模板中使用:

成功按钮
    

vue项目elment按需导入_第2张图片
8.本期分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!

你可能感兴趣的:(vue.js,element-ui)