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']

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

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!