Windows10（WSL使用）でVue.jsアプリを作成するまでの手順

公開日：2018/11/19 更新日：2018/11/19

vuejs

はじめに

Windows10のWSL（Windows Subsystem Linux）上でVue.jsアプリを構築して立ち上げるところまでの手順をメモします。

できるようになること

以下のように、Vue.jsのデフォルト状態のアプリを作成して、ブラウザからアクセスして表示させます。

前提と環境

以降の作業は、Windows10のWSL（Windows Subsystem for Linux）のUbuntu上で行いました。

Windows10 + WSL + Ubuntu
Node.js（ver 10.3.0）、npm（ver 6.1.0）はインストール済

nvmを使ってNode.jsをUbuntuにインストールする手順

Vue CLIをインストールする

Vue.jsアプリを作成するにあたって、手っ取り早くかつ便利に開発を進めるためにVue CLIというツールを先にインストールします。コマンドプロンプトやPowerShellからWSL上のUbuntuにログインし、Ubuntu内で適当なフォルダに移動して以下のコマンドを実行します。なお、Vue CLIのインストールには、Node.jsのバージョンが8.9以上である必要があります。また、以降はすべてWSLのUbuntu上での作業になりますが、MacOSやLinux、仮想マシン上など他の環境でも同じ作業になると思います。

$ npm install -g @vue/cli
/home/users/.nvm/versions/node/v8.11.4/bin/vue -> /home/users/.nvm/versions/node/v8.11.4/lib/node_modules/@vue/cli/bin/vue.js

> protobufjs@6.8.8 postinstall /home/users/.nvm/versions/node/v8.11.4/lib/node_modules/@vue/cli/node_modules/protobufjs
> node scripts/postinstall


> nodemon@1.18.4 postinstall /home/users/.nvm/versions/node/v8.11.4/lib/node_modules/@vue/cli/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/@vue/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @vue/cli@3.0.5
added 632 packages from 446 contributors in 27.319s

以下のようにバージョンを確認することができます。2018年10月時点では、バージョン３系が最新になります。

$ vue --version
3.0.5

なお、以下のようにvue-cliというパッケージ名でもインストールすることができますが、これは古いバージョンである2.9.6がインストールされ、deprecated（廃止予定）となっています。これについては公式サイトにおいてもアナウンスされています。

$ npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/home/vagrant/.nvm/versions/node/v8.11.4/bin/vue -> /home/vagrant/.nvm/versions/node/v8.11.4/lib/node_modules/vue-cli/bin/vue
/home/vagrant/.nvm/versions/node/v8.11.4/bin/vue-init -> /home/vagrant/.nvm/versions/node/v8.11.4/lib/node_modules/vue-cli/bin/vue-init
/home/vagrant/.nvm/versions/node/v8.11.4/bin/vue-list -> /home/vagrant/.nvm/versions/node/v8.11.4/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.6
added 237 packages from 205 contributors in 9.706s

もし間違ったバージョンをインストールした場合は、以下のようにアンインストールすることができます。

$ npm uninstall -g vue-cli
removed 237 packages in 2.415s

npmコマンドについては以下が参考になりました。 npmコマンドの使い方- Qiita

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

以下のVue CLIのcreateコマンドを使って対話形式で設定を行いながらVue.jsアプリを構築していきます。ここでは作成するアプリの名前をfirstappとしています。このアプリ名と同じフォルダ名が現在のフォルダ直下に作成され、その中に必要なファイルが用意されていきます。

$ vue create firstapp

createコマンドを実行すると、まずはじめにあらかじめ用意された設定を使う（default(babel, eslint)）か、設定項目を１つづつ選択していく(Manually select features)かを選択します。ここでは、後者のManually select featuresで進めて行きます。なお、Manually select featuresの設定内容は、次回でも同様の設定をすぐに行えるように最後に任意の名前で保存しておくことができます。

Vue CLI v3.1.1
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

最初の設定項目は、作成するVue.jsアプリの機能についてです。以下のように、必要な機能を選択して進めます。矢印キーで必要な機能にカーソルをあわせてスペースキーで選択できます。複数選択可能です。選択したらEnterキーで次に進みます。以下ではBabel、Router、CSS Pre-processorsを選択しています。これらの選択肢についての説明は省略します。　

Vue CLI v3.1.1
? Please pick a preset: Manually select features
? Check the features needed for your project: ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

上記でRouterを選択した場合は、Vue Routerのhisotryモードを使用するか確認されます。

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)y

historyモードについての説明はここでは省略します。以下が公式サイトの説明になります。

router.vuejs.org

HTML5 History モード

次はCss pre-processorの設定です。　

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS
  Less
  Stylus

Linterの設定です。Linterとは、構文チェックを自動で行ってミスや推奨の書き方などを提示してくれるツールです。そこにスペースは入れるべきではないなども指摘してくれます。どこまで指摘するか、どういうルールに則って指摘するかは色々とあるためここで好みのLinterを選択します。

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Linterの実行タイミングの指定です。ファイル保存時かコミットした時かの選択です。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

Babelなどの設定ファイルをどこに保存するかの設定です。ここでは、package.jsonに保存します。

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
  In dedicated config files
❯ In package.json

これまでに行った設定を次回使えるよう保存しておくのかの確認です。

? Save this as a preset for future projects? (y/N)

yを選択した場合は、任意の名前をつけてEnterします。次回createコマンドを使用した時に選択できるようになります。

? Save preset as: ~/test

また、環境にもよりますが、以下のような確認がでる場合があります。これは、「オリジナルのnpmリポジトリだとダウンロードに時間かかりそうなので、より早いリポジトリからダウンロードするか？」という質問になります。なお、より早いリポジトリというのは、以下のURLを見て分かるようにリポジトリの場所がtaobao.orgとなっています。taobao.comは中国のAlibaba系列のWebショッピング会社のようですが、taobao.orgも同じ会社の管理下なのかについては未確認です。特に急ぎでもなければNoで拒否してオリジナルのリポジトリを使用してもOKと思います。

?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)Y

完了すると、以下のようにVue.jsのプロジェクトの作成がはじまります。数分ほどかかります。

Vue CLI v3.1.1
✨  Creating project in /mnt/c/Users/albion/OneDrive/workspace/vueProject/firstapp.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

[ .................] - fetchMetadata: sill pacote range manifest for read-pkg@^4.0

作成が完了すると、最終的に以下のようにターミナルに表示されます。

🎉  Successfully created project firstapp.
👉  Get started with the following commands:

 $ cd firstapp
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config.
You will need to perform the initial commit yourself.

上記に指示が書いてある通り、以下のコマンドを実行します。

$ cd firstapp
$ npm run serve

npm run serveがVue.jsアプリの起動コマンドになり、まずはVue.jsアプリをビルドして起動します。実行すると、以下のように表示されます。あとは実際にブラウザからアクセスしてみます。

 DONE  Compiled successfully in 5477ms                                                                  10:59:45 PM
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.56.1:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

あとはhttp://localhost:8080/でブラウザからアクセスできます。もし仮想マシン上でVue.jsアプリを作成して起動した場合は、localhostではアクセスできないため、仮想マシンのIPアドレスでアクセスします。アクセスすると以下のような画面が表示されると思います。これでVue.jsアプリの作成が完了です。