LoginSignup
5
8

More than 5 years have passed since last update.

[Vue.js] vue-cliで作成したプロジェクトにelement-uiを導入する

Last updated at Posted at 2017-07-19

vue-cliで作成したプロジェクトにelement-uiを導入しようとしたのですが、公式のドキュメントは純粋なVue.jsのチュートリアルしか載っておらず少しハマったので記録しておきます。
公式のQuick startを見るとwebpack.config.jsの修正などが必要のようで、vue-cliで作成したプロジェクトはどこをどう弄れば良いのかなと思っていましたが、結論から言うと以下のように修正するだけでelement-uiを導入することができました。

この記事はブログからの転載です。

1 element-uiをインストールする

$ npm install element-ui -S

2 main.jsを修正する

 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import ElementUI from 'element-ui'
+import locale from 'element-ui/lib/locale/lang/ja'
+import 'element-ui/lib/theme-chalk/index.css'
+
+Vue.use(ElementUI, { locale })

ロケールについてはここに説明があります。
http://element.eleme.io/#/en-US/component/i18n

正直 import 'element-ui/lib/theme-chalk/index.css' の必要性が分かっていませんが、おそらく全てのコンポーネントを一括で使えるようにしているのだと思います。
本来は(GitHubのドキュメント)[https://github.com/ElemeFE/element#quick-start]のように、コンポーネントをひとつずつimportしないといけない気がします。

3 App.vueを修正して動作確認する

 <template>
   <div id="app">
-    <img src="./assets/logo.png">
+    <div class="block">
+      <div class="block">
+        <el-date-picker
+          v-model="value"
+          type="datetime"
+          placeholder="日付の選択">
+        </el-date-picker>
+      </div>
+    </div>
     <router-view></router-view>
   </div>
 </template>
@@ -12,12 +20,4 @@ export default {
 </script>

https://gyazo.com/70babb1956ac779a94640a8b6f372ef2

動作確認のため無視していますが、 コンソールに [Vue warn]: Property or method "value" is not defined on the instance but...(省略) が出ます。

参考

公式のQuick start
http://www.webopixel.net/javascript/1229.html


@egghikari さんに指摘していただいた index.css のpathについて修正しました。

5
8
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
8