vue项目中element-ui全局引入&按需引入&按需引入报错解决
全局引入1.安装element-uicnpm install element-ui --save2.main.js引入elementUIimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)3.App.vue删掉原始内容,添加如下内容:4.浏览器查看效果出现一
·
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.效果:可以正常使用之前定义的内容。
更多推荐
已为社区贡献1条内容
所有评论(0)