요소 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!