element ui css出错的解决办法:首先在main.js中写入内容“import Vue from 'vue' import ElementUI from...”;然后安装element-ui;最后在main.js引入并注册即可。
本文操作环境:windows7系统、css3版本、Dell G3电脑。
vue 导入element-ui css报错解决方法
组件使用参照官网http://element.eleme.io/#/zh-CN/component/quickstart
在 main.js 中写入以下内容:
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import App from './App.vue' Vue.use(ElementUI)
如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import Vue from 'vue' import { Button, Select } from 'element-ui' import App from './App.vue' Vue.component(Button.name, Button) Vue.component(Select.name, Select) /* 或写为 * Vue.use(Button) * Vue.use(Select) * /
安装element-ui
cnpm i element-ui@1.3.7 (@为固定版本)
建议固定vue和element-ui的版本,避免将来版本升级后产生冲突
引入element-ui
在app.vue引入element-ui,然后就可以在其他任何页面中使用了
cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install file-loader --save-dev { test: /\.css$/, include: [? /src/,//表示在src目录下的css需要编译? '/node_modules/element-ui/lib/' //增加此项? ],? loader: 'style-loader!css-loader' },(配置加上这个一般不会出错)
然后在 main.js 引入并注册
webpack1版本的
test:/\.css$/, loaders:['style','css']
原来vue模板只能有一个根对象
所以你想要出现正常的效果,你的用一个div来或是别的标签来包裹全部的元素
<template> <div> <el-button type="primary">haha1</el-button> <div>hahhaa</div> <el-input type="text" placeholder="测试一下"></el-input> <h1>{{test1}}</h1> </div> </template>
推荐:《css视频教程》
以上是如何解决element ui css出错问题的详细内容。更多信息请关注PHP中文网其他相关文章!