elementUI中文网址:
https://element.eleme.cn/#/zh-CN/component/layout

全局引入

1.安装element-ui

cnpm install element-ui --save 

2.main.js引入elementUI

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)


3.App.vue删掉原始内容,添加如下内容:


4.浏览器查看效果
出现一个Button按钮,点击按钮,会有弹出框。成功。

按需引入

1.安装babel组件

cnpm install babel-plugin-component -D

2.新建文件并粘贴如下内容进去

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

2.mian.js修改引入

之前全局引入的部分内容注释掉

// import ElementUI from 'element-ui'
// Vue.use(ElementUI)
import {Button, Dialog, Row, Col} from 'element-ui'
Vue.component(Button.name, Button)
Vue.component(Dialog.name, Dialog)

3.如果报错 Exit status 1
解决:创建. babelrc文件命名 点和名字中间有个空格

4.如果还报错,修改. babelrc文件
注意:如果大括号报错,换成中括号。

5.效果:可以正常使用之前定义的内容。

Logo

前往低代码交流专区

更多推荐