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

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>

動作確認のため無視していますが、 コンソールに [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について修正しました。