読者です 読者をやめる 読者になる 読者になる

カメ飼ってる新米エンジニアの覚書き

とにかくカメがかわいい

ていねいにvue-cliを使った環境構築手順を書いてみる

Vue-cli環境構築

vue-cliで簡単にvue.jsの環境構築ができます。

前提条件

以下がインストールされていること

  • node.js
  • npm

ver

node -v npm -vでインストールされているバージョンが確認できます。

インストールしていない方はしてください。 nodeはnodebrewなどを使用して、バージョンを管理しておきましょう。

1.ターミナルを開きます。

spotlight(command+space)で ターミナルって入れると候補で出してくれます。
ターミナルを開くよ

vue-cliをインストールします

npm install -g vue-cli

vue-cliインストール

インストールが始まります。
ちょっと長いかも・・・

インストール

終わりました。

プロジェクトを作成します

vue init webpack my-project

init

webpackをボイラーテンプレートとしてプロジェクトを作成します。

色々聞いてきます。

projectname

EnterでOK

description

EnterでOK

author

EnterでOK

runtime

EnterでOK

install

yを入力

lint
lintの設定ですね。慣れないうちは、ここはnにしておきましょう

unit

テストの環境を構築するかどうか?にします

e2e
こちらはe2eテストの環境ですね。nにします

project作成終了
project作成終了です

まだ終わっていません!

cd my-projectディレクトリを移動します。

cdするよ

これで、現在地はmy-projectです

npm installします。
ちょっと長いです。 package.jsonに記載してある依存モジュールをインストールしています。

npminstall

終わりました
終わりました。

起動します

環境構築は完了です。
立ち上げてみましょう!
npm run devでローカルのnodeサーバーが起動します。

npmrundev

npmrundev
URLを教えてくれるので、アクセスしてみましょう。
この場合はhttp://localhost:8080です

vue

開きました!

起動したサーバーはctrl+cで終了することができます。

便利ツールを導入しておきましょう!

vue.js devtoolsというchromeのアドオンがあります。

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

vue

先ほど立ち上げたhttp://localhost:8080で、このように使うことができます。

導入後

環境構築は以上です!!

参考

jp.vuejs.org