pillyshi: お手軽なvue.js + webpackプロジェクトの始め方

vue-cli

今回は，@vue/cli (旧vue-cli)を使って，お手軽にvue.js + webpackプロジェクトを作成したいと思います．

nodebrewを使います．

brew install nodebrew

nodebrewを使ってnodeを入れます． npmも入ります．VERSIONのところはインストールしたバージョンを指定してください．

nodebrew install-binary latest
nodebrew use VERSION

npmで@vue/cliをインストールします．最新版は，vue-cliではなく，@vue/cliなので注意．至る所で使うので，グローバルインストールでいいでしょう．

npm install -g @vue/cli

vueプロジェクトをお手軽に作るために，@vue/cli-initを入れます．

npm install -g @vue/cli-init

これで準備が整いました．webpack + vueプロジェクトを作ります．今回は，webpack-simpleをテンプレートとして選びました．

vue init webpack-simple vue-webpack-simple-example
cd vue-webpack-simple-example
npm install

以下で開発用サーバが動くと思います．

npm run dev

buildは以下でできます．

npm run build

とても簡単で素晴らしいですね．次回は開発用サーバではなく，nginx (docker)でこれを動かしてみたいと思います．

Written with StackEdit.

pillyshi