【Vue CLI】Vue CLIを導入したい

Vue CLI

Vue CLIを扱う際には、

  • node
  • npm

も同時に必要です。
ただしnodeをインストールすれば、npmも同時にインストールされることになっています。

node、npmがインストールされているか確認

$ node -v
v10.7.0
$ npm -v
6.1.0

インストール元

nodejs.org

Vue CLIのインストール

$ npm install -g vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/home/ec2-user/.nvm/versions/node/v10.7.0/bin/vue -> /home/ec2-user/.nvm/versions/node/v10.7.0/lib/node_modules/vue-cli/bin/vue
/home/ec2-user/.nvm/versions/node/v10.7.0/bin/vue-init -> /home/ec2-user/.nvm/versions/node/v10.7.0/lib/node_modules/vue-cli/bin/vue-init
/home/ec2-user/.nvm/versions/node/v10.7.0/bin/vue-list -> /home/ec2-user/.nvm/versions/node/v10.7.0/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.6
added 241 packages from 206 contributors in 9.609s

Vue CLIのバージョン確認

ec2-user:~/environment (master) $ vue --version
2.9.6

Vue CLIのパッケージインストール

//プロダクト用ならwebpack、学習用ならwebpack-simpleという分け方でOK
$ vue init webpack-simple my-vue-cli
いくつかの質問がなされる
? Project name my-vue-cli
? Project description A Vue.js project
? Author h.m.
? License h.m.
? Use sass? No

   vue-cli · Generated "my-vue-cli".

   To get started:
   
     cd my-vue-cli
     npm install
     npm run dev
simpleパッケージじゃないwebpackをインストールした場合の質問
$ vue init webpack my-vue-cli

? Project name my-vue-cli
? Project description studing
? Author h.m
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) 
npm

   vue-cli · Generated "my-vue-cli".

.
.
.
.

# Project initialization finished!
# ========================
To get started:

  cd my-vue-cli
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

開発用サーバをrun

npm run dev

参考

基礎から学ぶ Vue.js