Vue CLIをインストールしました。

概要

1. nodebrewのインストール
2. node.jsのインストール
3. npmでvue-cliをインストール
4. npmでyarnをインストール
5. Vueでプロジェクトを作成する
6. Webサーバ実行

詳細

nodebrewのインストール

Homebrewでnodebrewをインストールする

$ brew install nodebrew

nodebrewのPATHをbash_profileに追加する

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

node.jsのインストール

nodebrewでインストールできるnode.jsのバージョンを表示する。

$ nodebrew ls-remote
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6
〜〜 省略 〜〜
v11.0.0 v11.1.0 v11.2.0 v11.3.0 v11.4.0
〜〜 省略 〜〜

最新のnode.jsをインストールする

$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v11.4.0/node-v11.4.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

カレントで利用するnode.jsのバージョンを指定する

$ nodebrew use v11.4.0
use v11.4.0
$ nodebrew ls
v11.4.0
current: v11.4.0

npmでvue-cliをインストール

$ npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/Users/{ユーザ名}/.nodebrew/node/v11.4.0/bin/vue -> /Users/{ユーザ名}/.nodebrew/node/v11.4.0/lib/node_modules/vue-cli/bin/vue
/Users/{ユーザ名}/.nodebrew/node/v11.4.0/bin/vue-init -> /Users/{ユーザ名}/.nodebrew/node/v11.4.0/lib/node_modules/vue-cli/bin/vue-init
/Users/{ユーザ名}/.nodebrew/node/v11.4.0/bin/vue-list -> /Users/{ユーザ名}/.nodebrew/node/v11.4.0/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 17.343s

npmでyarnをインストール

$ npm install -g yarn
/Users/{ユーザ名}/.nodebrew/node/v11.4.0/bin/yarn -> /Users/{ユーザ名}/.nodebrew/node/v11.4.0/lib/node_modules/yarn/bin/yarn.js
/Users/{ユーザ名}/.nodebrew/node/v11.4.0/bin/yarnpkg -> /Users/{ユーザ名}/.nodebrew/node/v11.4.0/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.12.3
added 1 package in 1.789s

YarnのPATHをbash_profileに追加する

$ echo 'export PATH="$HOME/.yarn/bin:$PATH"' >> ~/.bash_profile
$ source ~/.bash_profile

Vueでプロジェクトを作成する

例としてプロジェクト名「my-proj」を作成する

$ vue init webpack my-proj

? Project name my-proj
? Project description A Vue.js project
? Author {ユーザ名} <xxxxxx@users.noreply.github.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? 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)
 yarn

   vue-cli · Generated "my-proj".


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

yarn install v1.12.3
info No lockfile found.
[1/5] ?  Validating package.json...
[2/5] ?  Resolving packages...
warning autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
warning webpack-bundle-analyzer > bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
[3/5] ?  Fetching packages...
[4/5] ?  Linking dependencies...
[5/5] ?  Building fresh packages...
success Saved lockfile.
✨  Done in 69.91s.


Running eslint --fix to comply with chosen preset rules...
# ========================

yarn run v1.12.3
$ eslint --ext .js,.vue src --fix
✨  Done in 2.16s.

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

To get started:

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

Webサーバ実行

$ cd my-proj
$ npm run dev

DONE Compiled successfully in 6410ms 20:45:07
I Your application is running here: http://localhost:8080

Webブラウザで表示する

http://localhost:8080

Welcome to Your Vue.js Appという画面が表示される。