ていねいにvue-cliを使った環境構築手順を書いてみる
Vue-cli環境構築
vue-cliで簡単にvue.jsの環境構築ができます。
前提条件
以下がインストールされていること
- node.js
- npm
node -v npm -vでインストールされているバージョンが確認できます。
インストールしていない方はしてください。 nodeはnodebrewなどを使用して、バージョンを管理しておきましょう。
1.ターミナルを開きます。
spotlight(command+space)で
ターミナルって入れると候補で出してくれます。
vue-cliをインストールします
npm install -g vue-cli
インストールが始まります。
ちょっと長いかも・・・
終わりました。
プロジェクトを作成します
vue init webpack my-project
webpackをボイラーテンプレートとしてプロジェクトを作成します。
色々聞いてきます。
EnterでOK
EnterでOK
EnterでOK
EnterでOK
yを入力
lintの設定ですね。慣れないうちは、ここはnにしておきましょう
テストの環境を構築するかどうか？にします
こちらはe2eテストの環境ですね。nにします
project作成終了です
まだ終わっていません！
cd my-projectでディレクトリを移動します。
これで、現在地はmy-projectです
npm installします。
ちょっと長いです。
package.jsonに記載してある依存モジュールをインストールしています。
終わりました。
起動します
環境構築は完了です。
立ち上げてみましょう！
npm run devでローカルのnodeサーバーが起動します。
URLを教えてくれるので、アクセスしてみましょう。
この場合はhttp://localhost:8080です
開きました！
起動したサーバーはctrl+cで終了することができます。
便利ツールを導入しておきましょう！
vue.js devtoolsというchromeのアドオンがあります。
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
先ほど立ち上げたhttp://localhost:8080で、このように使うことができます。
環境構築は以上です！！
参考
