Vue2引入ElementUI

牧小七

已于 2023-05-20 21:43:14 修改

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： elementui vue.js javascript

于 2023-05-20 18:36:30 首次发布

本文链接：https://blog.youkuaiyun.com/gc666888/article/details/130784475

版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

安装element-ui

npm i element-ui

方式一：完整引入

修改main.js文件

在这里插入图片描述

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.use(ElementUI)

new Vue({
    render: h => h(App),
    router
}).$mount('#app')

方式二：按需引入ElementUI

安装 babel-plugin-component

npm install babel-plugin-component -D

修改babel.config.js文件

在这里插入图片描述

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

修改main.js文件

在这里插入图片描述

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from  './router'
import { Button,Row,DatePicker } from 'element-ui';
Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.component(Button.name,Button)
Vue.component(Row.name,Row)
Vue.component(DatePicker.name,DatePicker)

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

接下来就可以再vue文件中使用ElementUI了