要素UI CSSエラー問題を解決する方法

Element ui CSS エラーの解決策: 最初に main.js に「import Vue from 'vue' import ElementUI from...」という内容を記述し、次に element-ui をインストールし、最後に main.js に導入します。登録する。

#この記事の動作環境: Windows7 システム、css3 バージョン、Dell G3 コンピューター。

vue import element-ui css エラー解決方法

コンポーネントの使用方法については、公式 Web サイト http://element.eleme.io/# を参照してください。 /zh-CN/component/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)
* /

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

次に、

webpack1 を導入して登録しますmain.js のバージョン

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

vue テンプレートはルート オブジェクトを 1 つしか持てないことが判明しました

したがって、通常の効果を持たせたい場合は、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 中国語 Web サイトの他の関連記事を参照してください。