はじめに
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を使ってみようと思います。
スポンサーリンク