Yak shaving logs


My life is just yak shaving.

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

2017/07/18 #vue.js #vue-cli #element-ui

By Yusuke Takita


こんにちは。Kajitz inc.の瀧田です。

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-default/index.css'
+
+Vue.use(ElementUI, { locale })

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

正直 import 'element-ui/lib/theme-default/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

このエントリーをはてなブックマークに追加

categories


最新記事


tags