Comment résoudre le problème d'erreur CSS de l'élément ui

La solution à l'erreur CSS de l'élément ui : écrivez d'abord le contenu "import Vue from 'vue' import ElementUI from..." dans main.js puis installez element-ui et enfin, introduisez-le dans main.js ; Et inscrivez-vous simplement.

L'environnement d'exploitation de cet article : système Windows 7, version css3, ordinateur Dell G3.

Solution d'erreur CSS Vue import element-ui

Pour l'utilisation des composants, veuillez vous référer au site officiel http://element.eleme.io/# /zh-CN/ composant/quickstart

Écrivez le contenu suivant dans 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)

Si vous souhaitez uniquement introduire certains composants, tels que Button et Select, alors vous devez écrire le contenu suivant dans 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)
* /

Installer element-ui

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

Il est recommandé de corriger les versions de vue et element-ui pour éviter les conflits après les futures mises à niveau de version

Introduisez element-ui

Introduisez element-ui dans app.vue, et vous pourrez ensuite l'utiliser dans n'importe quelle autre 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'
},（配置加上这个一般不会出错）

Ensuite, introduisez et enregistrez

version webpack1 de

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

< dans main.js 🎜>Il s'avère que le modèle vue ne peut avoir qu'un seul objet racine

Donc, si vous voulez avoir des effets normaux, vous devez utiliser un div ou d'autres balises pour envelopper tous les éléments

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

Recommandé :《

tutoriel vidéo CSS》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!