在vue2.0中引用element-ui组件库的方法
在vue2.0中引用element-ui组件库
element-ui是由饿了么团队开发的一套基于Vue2.0的桌面端组件库。
官网：http://element.eleme.io/
安装
npmielement-ui-S
引用完整的element-ui
importElementUIfrom'element-ui'; import'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
需要注意的是，样式文件需要单独引入。
如果报错，在webpack.config.js中配置file_loader。可以在rules数组内直接增加下面这个配置项：
{
test:/\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader:'file-loader'
}
按需引入组件
1、安装babel-plugin-component插件：
npminstallbabel-plugin-component-D
2、修改.babelrc配置文件
将
{
"presets":[
["env",{"modules":false}],
"stage-3"
]
}
改为：
{
"presets":[["env",{"modules":false}]],
"plugins":[
[
"component",
{
"libraryName":"element-ui",
"styleLibraryName":"theme-chalk"
}
]
]
}
3、如果报错，在webpack.config.js中配置file_loader。
可以在rules数组内直接增加下面这个配置项：
{
test:/\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader:'file-loader'
}
4、使用组件
import{Button,Select}from'element-ui';
Vue.component(Button.name,Button);
Vue.component(Select.name,Select);
/*或写为
*Vue.use(Button)
*Vue.use(Select)
*/
总结
以上所述是小编给大家介绍的在vue2.0中引用element-ui组件库的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！