element ui,全部导入组件与按需导入的两种方法

1.直接导入全部组件,直接引入全部组件样式

在main.js中
//全局引入
import Elementui from "element-ui"
import 'element-ui/lib/theme-chalk/index.css'
//全局挂载
Vue.use(Elementui )

-------------------------------------------------------------------------------------------------------------------------------------------------------------

//babelrc文件中进行配置
"plugins": [
    "transform-vue-jsx", "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

2.借助 babel-plugin-component,我们在main.js中按需导入,缺点,导入的太多,会导致mian.js中代码混乱

    Vue.use(Button)

3.为防止main.js文件中代码太多混乱,将组件在其他文件文件中按需导入,再导入main.js文件中

//在src文件下创建elemen文件夹,内建index.js
/ /导入自己需要的组件,再暴露出去
import { Button  } from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Button)
  }
}
export default element

//在main.js文件中
import element from "./element/index" 
import 'element-ui/lib/theme-chalk/index.css'
// 挂载引入的文件
Vue.use(element)

你可能感兴趣的:(element ui,全部导入组件与按需导入的两种方法)