はじめに

Webをベースにしてクロスプラットフォームのアプリを作ってみようと思い、
Vue.jsでWeb側を作ってみることにしました。
（使ってみたかっただけ）



プロジェクトができるまで

コマンドラインからvueの操作ができるCLIツールをインストール

$ npm install --global vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/local/Cellar/node/8.8.1/bin/vue -> /usr/local/Cellar/node/8.8.1/lib/node_modules/vue-cli/bin/vue
/usr/local/Cellar/node/8.8.1/bin/vue-init -> /usr/local/Cellar/node/8.8.1/lib/node_modules/vue-cli/bin/vue-init
/usr/local/Cellar/node/8.8.1/bin/vue-list -> /usr/local/Cellar/node/8.8.1/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.6
updated 1 package in 2.694s

コマンドのパスを通します。

$ vi ~/.bash_profile

この行を一番下に書き加えました。

export PATH="/usr/local/Cellar/node/8.8.1/lib/node_modules/vue-cli/bin:$PATH"

編集した内容を適用させます。

$ source ~/.bash_profile

vueプロジェクトをwebpackを使って初期化します。

$ vue init webpack HamopleVue

いろいろ聞かれます。
* プロジェクト名（大文字不可）
* プロジェクトの説明
* 著者
* vue-routerをインストールするか？
* ESLintを使用するか？
* UTのセットアップをするか？
* e2eテストの設定をするか？
* プロジェクト作成後にnpm installを行うか？

? Project name sample_project
? Project description A Vue.js project
? Author shigu493
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
   vue-cli · Generated "SampleProject".


# Installing project dependencies ...
# ========================

（中略）

# Project initialization finished!
# ========================

To get started:

  cd HamopleVue
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

最後の方に書いてある起動方法で起動します。

$ cd HamopleVue
$ npm run dev

起動が完了すると下記のように表示されます。

 DONE  Compiled successfully in 7428ms                                                                                                   17:33:17

 I  Your application is running here: http://localhost:8080

http://localhost:8080にアクセスします。
すると、下記のような画面が表示されます。

Command + Cでシャットダウンできます。

プロジェクトの配下はこんな感じになっています。

 $ ls -ltr
total 1040
-rw-r--r--     1 staff  staff     273  7  8 17:27 index.html
-rw-r--r--     1 staff  staff     554  7  8 17:27 README.md
-rw-r--r--     1 staff  staff    2702  7  8 17:27 package.json
drwxr-xr-x     3 staff  staff      96  7  8 17:27 static
-rw-r--r--     1 staff  staff  517536  7  8 17:28 package-lock.json
drwxr-xr-x     6 staff  staff     192  7  8 17:29 config
drwxr-xr-x    10 staff  staff     320  7  8 17:29 build
drwxr-xr-x     7 staff  staff     224  7  8 17:31 src
drwxr-xr-x     4 staff  staff     128  7  8 17:33 test
drwxr-xr-x  1031 staff  staff   32992  7  8 17:36 node_modules
  • build
    ビルド関連の設定ファイル（webpackの設定もここ）の配置場所

  • config
    各種設定ファイルの配置場所

  • src
    開発用のプログラムの配置場所

  • static
    コンポーネントに依存しない静的ファイルの配置場所　※これが今のところまだよくわからない…

  • test
    テスト（UTやe2eテスト）用設定ファイルの配置場所



終わりに

とりあえず画面が表示できるところまではサクッとできました。
次は、Vue.jsを使うなら何かと楽になるっぽいNuxt.jsを使ってみようと思います。

スポンサーリンク