vue+elementUI部分を利用したコンポーネント導入の実装方法

vue.js の UI コンポーネント ライブラリには、git 上に複数のプロジェクトがあります。私がよく目にするのは iView と Element です。どちらのコンポーネント ライブラリにも豊富なコンポーネントがあります。この記事では主に、vue+elementUI を使用してインポートされたコンポーネントを実装する場合の関連情報を紹介し、vue が elementUI を導入する際のエラーの解決策をサンプル コードを通じて詳しく紹介します。以下は小さな「一緒に学びましょう」です。

公式 Web サイトの紹介

• iView: Vue.js をベースにした高品質 UI コンポーネント ライブラリのセット

• Element、開発者、デザイナー、プロダクト マネージャー向けに用意された Vue 2.0 ベースのコンポーネント ライブラリのセット, 提供 Web サイトを迅速に形にするためのサポート デザイン リソースが提供されます。

どちらにも独自の長所と短所があるため、私自身のニーズに基づいて、最終的に Element を使用することになりました。最近会社で小規模なバックエンドプロジェクトを開発したため、要素のコンポーネントをいくつか導入することを検討しました。初めて単独で導入する経験がないため、ネットでいろいろ読んで、個人的に感じているあれこれの問題があります。公式サイトでは分かりやすく説明されていなかったので（私のレベルが低すぎるかもしれません）、自分で調べて検証してみましたので、間違いがあればご指摘ください。

実装方法

1. vue-cliをインストールします

npm install -g vue-cli

2. プロジェクトを作成しますprojectNameはプロジェクトの名前です

npm install webpack projectName

3. プロジェクトのインストール依存関係を初期化します

cd projectName

5、elementui

npm install

をインストールします。まず、プロジェクトに style-loader と babel-plugin-component があるかどうかを確認します

npm install element-ui --save -dev

簡単に言うと、.babelrc を見つけます。 、元のファイルの内容をすべて削除し、次のコード

npm install xxx --save -dev

8. 次の文を webpack.base.conf.js

 { "presets": [["env", {
     "modules": false,
     "targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}
    }],
    "stage-2"],
  "plugins": [
     "transform-runtime",
     ["component",[
     {
     "libraryName":"element-ui",
     "styleLibraryName":"theme-default" //1.4的老项目用这个，2.0的用theme-chalk，假设没效果看看官网又把默认的主题改 成那个了 跟着改一下应该就可以了
     }
     ]]
     ],
  "comments":false,   
  "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["istanbul"]
  }
  }
 }

に追加します。 9. main.js に

{
 test: /\.css$/,
 loader: 'style-loader'
},

を導入します。 Button と Input を使用できます

main.js に import 'element-ui/lib/theme-default/index.css' を導入するとエラーが報告され、プロジェクトを開始できませんでした。 package.json の webpack を "webpack": "beta" に変更して再起動します インストールするだけで起動できます

関連する推奨事項:

vue Element- ui入力リモート検索例詳細説明

VUE要素uiを使ってReuse Tableコンポーネントを書く

以上がvue+elementUI部分を利用したコンポーネント導入の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。