初級ガイド

技術ブログ

Vue.jsメモ - 入門編

インストール

> npm install -g vue

記事


Vuexによる開発デモです。大変参考になりました。

src/page1/Card.vue
src/page1/Search.vue
src/page1/TimeLine.vue

App.vue
import TimeLine from './components/page1/TimeLine'

となっているところ、記事中のディレクトリ構成に従えば

src/components/Card.vue
src/components/Search.vue
src/components/TimeLine.vue

App.vue
import TimeLine from './components/TimeLine'

になると思います。

また、ソースの最終行に空行が入っていないとエラー(Newline required at end of file but not found)を吐かれます。ESLintによるチェックが原因のようですがよく分かりません(下記記事参照)。最終行に空行を入れたらエラーは無くなりました。

最終的に下記のエラーが解決できずに詰まってしまいました。

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Search.vue
Module not found: Error: Can't resolve '../../vuex/mutation-types' in 'C:\Users\cometqp\Desktop\gipfy-vue\src\components'
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Search.vue 5:0-67
 @ ./src/components/Search.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/TimeLine.vue
 @ ./src/components/TimeLine.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

webpack形式で整えられたデモをインストールする
> vue init webpack 任意のディレクトリ名

依存関係を良い感じにやってくれる
> npm install