요소 UI CSS 오류 문제를 해결하는 방법

요소 ui CSS 오류에 대한 해결 방법: 먼저 main.js에 "import Vue from 'vue' import ElementUI from..."라는 내용을 작성한 다음 마지막으로 element-ui를 설치하고 main.js에 등록합니다.

이 문서의 운영 환경: windows7 시스템, css3 버전, Dell G3 컴퓨터.

vue import element-ui CSS 오류 해결

컴포넌트 사용법은 공식 홈페이지 http://element.eleme.io/#/zh-CN/comComponent/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)
* /

Install 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>

추천: "css 비디오 튜토리얼"

위 내용은 요소 UI CSS 오류 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!