macOS Sierraに簡単な方法でVueアプリを作成する

この記事ではmacOS Sierraにnpmとかvue-cliとかを使ってVueアプリを、https://github.com/vuejs/vue-cli で説明されている方法で作成してみます。

以下に掲載しているコードやターミナルに表示されているユーザー名やディレクトリ名等(shotaimac, snakada, study, my-vue等)は適宜読み替えてください。

前提条件

以下のような環境で作業をしました。

macOS Sierra バージョン 10.12.6
node --version: v8.0.0
npm --version: 5.6.0

vue-cliをインストールする

公式のInstallationに書いてあるとおりにやろうとすると、私の環境の場合パーミッションエラーが出てしまったので、以下のとおりsudoでおこないました。何やらdeprecated言われましたけど、一旦気にせず進めていきます。

ターミナル

shotaimac:study snakada$ sudo npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
（ここでちょっと待つと最後に以下が表示されます）
+ vue-cli@2.9.2
added 264 packages in 18.188s
shotaimac:study snakada$ 

vue-cli 2.9.2 がインストールされました。

Vueアプリを作成

公式のUsageを参考に、ひとまずもっとも簡単そうなwebpack-simpleテンプレートでVueアプリを作成してみます。

ターミナル

shotaimac:study snakada$ vue init webpack-simple my-vue

? Project name my-vue
? Project description A Vue.js project
? Author snakada
? License MIT
? Use sass? Yes

   vue-cli · Generated "my-vue".

   To get started:
   
     cd my-vue
     npm install
     npm run dev

shotaimac:study snakada$ 

開発を開始する

親切にも上記ターミナルの最後に**To get started:**で、次に何をやるべきかの指示があるのでそのとおりやってみます。

ターミナル

shotaimac:study snakada$ cd my-vue/
shotaimac:my-vue snakada$ npm install
（ここでちょっと待つと最後に以下が表示されます）
added 1031 packages in 104.013s
shotaimac:my-vue snakada$ 

npmインストールが終わったようなので、 npm run dev してみます。

ターミナル

shotaimac:my-vue snakada$ npm run dev

> my-vue@1.0.0 dev /Users/snakada/projects/study/my-vue
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html

サーバーの準備が整ったようで、なおかつ勝手にブラウザで以下の画面が表示されました。

いい感じです。