So lösen Sie das CSS-Fehlerproblem der Element-UI

Die Lösung für den Element-UI-CSS-Fehler: Schreiben Sie zuerst den Inhalt „Vue aus ‚vue‘ importieren, importieren aus …“ in main.js und installieren Sie dann element-ui.

Die Betriebsumgebung dieses Artikels: Windows7-System, CSS3-Version, Dell G3-Computer.

vue-Importelement-UI-CSS-Fehlerlösung

Informationen zur Komponentenverwendung finden Sie auf der offiziellen Website http://element.eleme.io/#/zh-CN/component/quickstart

Schreiben Sie den folgenden Inhalt 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)

Wenn Sie nur einige Komponenten wie Button und Select einführen möchten, müssen Sie den folgenden Inhalt in main.js schreiben:

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 installieren

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

Es wird empfohlen Korrigieren Sie die Versionen von vue und element-ui, um zu vermeiden, dass nach zukünftigen Versionsaktualisierungen Konflikte auftreten.

Element-ui einführen.

Element-ui in app.vue einführen, und dann können Sie es auf jeder anderen Seite verwenden.

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

Dann vorstellen und registrieren Sie sich in main.js

Webpack1-Version

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

Es stellt sich heraus, dass die Vue-Vorlage nur ein Stammobjekt haben kann

Wenn Sie also normale Effekte erzielen möchten, verwenden Sie ein div oder andere Tags, um alle Elemente einzuschließen

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

Empfohlen: „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo lösen Sie das CSS-Fehlerproblem der Element-UI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!