How to solve element ui css error problem

Element ui css error solution: first write the content "import Vue from 'vue' import ElementUI from..." in main.js; then install element-ui; finally introduce it in main.js And just register.

The operating environment of this article: windows7 system, css3 version, Dell G3 computer.

vue import element-ui css error solution

For component usage, please refer to the official website http://element.eleme.io/#/zh-CN/ component/quickstart

Write the following content in 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)

If you only want to introduce some components, such as Button and Select, then you need to write the following content in 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)
* /

Install element-ui

cnpm i element-ui@1.3.7 （@为固定版本）

It is recommended to fix the versions of vue and element-ui to avoid conflicts after future version upgrades

Introduce element-ui

Introduce element-ui in app.vue, and then you can use it in any other page

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'
},（配置加上这个一般不会出错）

Then introduce and register the

webpack1 version in main.js

test:/\.css$/,
loaders:['style','css']

It turns out that the vue template can only have one root object

So if you want to have normal effects, you should use a div or other tags to wrap all the elements

<template>
    <div>
        <el-button type="primary">haha1</el-button>
        <div>hahhaa</div>
        <el-input type="text" placeholder="测试一下"></el-input>
        <h1 id="test">{{test1}}</h1>
    </div>
</template>

Recommended : "css video tutorial"

The above is the detailed content of How to solve element ui css error problem. For more information, please follow other related articles on the PHP Chinese website!