vue 导入 element ui CSS 出错怎么解决? 下面本篇文章给大家介绍一下 vue 导入 element-ui CSS 报错的解决方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
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>
更多 Web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17708.html