MawaLog

一日一日、楽しく生きる。技術と音楽が好き。

vue.js開発過程記録2:hello worldアプリの構築コマンドの記録

f:id:k_mawa:20180617021558p:plain

経緯など

ちょっと既存のWebアプリ(Django/Python)に非同期処理をアプリにかけたいのでvue.jsを特訓することになったので、メモを残していきます。目標はWebAPIを叩けるようにするアプリです。

手順

環境構築のあたり、node.js&npmセットアップは以下に情報まとめています。

k-mawa.hateblo.jp

$ vue -V
2.9.6
// ちゃんと動きますね

$ vue init webpack newproj
//初期設定の質問がはじまります。

? Project name newproj //適当です
? Project description apitestapp //適当です
? Author mawa //自分の名前
? Vue build standalone //適当です
? Install vue-router? Yes //いるっぽい
? Use ESLint to lint your code? No //テストなので適当です
? Set up unit tests No //テストなので適当です
? Setup e2e tests with Nightwatch? No //テストなので適当です
? Should we run `npm install` for you after the project has been created? (recommended) npm //npmで開発アプリシミュレーターなど制御できる
   vue-cli · Generated "newproj".


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

//ごちゃごちゃプロセスが始まります


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

To get started:

  cd newproj
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

//できた模様

$ ls
newproj

//できてますね

$ cd newproj/
$ ls
README.md       config          node_modules        package.json        static
build           index.html      package-lock.json   src

$ npm run dev

//しばし待ちます・・・mac miniで、1〜3分以内くらいでした・・・多分。

//http://localhost:8081で確認できましたね。
//画像は記事トップの画像です。

続き

次は、生成されたファイルのコア部分をチェックしていく予定です。

参考になった書籍

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発