virtualiment

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

公開日：2018/11/19 更新日：2018/11/19
vuejs
Windows10（WSL使用）でVue.jsアプリを作成するまでの手順のサムネイル

はじめに

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

できるようになること

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

welcom-vue-932x1024.png

前提と環境

以降の作業は、Windows10のWSL（Windows Subsystem for Linux）の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
Plain text

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

$ vue --version
3.0.5
Plain text

なお、以下のように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
Plain text

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

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

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

関連パッケージのインストール

さらに、今後vue serveやvue buildのような、便利なコマンドを使えるようにするために必要なcli-service-globalというパッケージもインストールしておきます。

npm install -g @vue/cli-service-global
$ npm install -g @vue/cli-service-global
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!

> yorkie@2.0.0 install /home/users/.nvm/versions/node/v8.11.4/lib/node_modules/@vue/cli-service-global/node_modules/yorkie
> node bin/install.js

setting up Git hooks
trying to install from sub 'node_module' directory, skipping Git hooks installation
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/@vue/cli-service-global/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-service-global@3.0.5
added 1279 packages from 742 contributors in 52.178s
Plain text

以上でVue.jsアプリ作成に必要な準備は完了です。次に実際にVue CLIを利用してVue.jsアプリを作成していきます。

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

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

$ vue create firstapp
Plain text

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
Plain text

最初の設定項目は、作成する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
Plain text

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

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

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

router.vuejs.org
HTML5 History モード

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
Plain text

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

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

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
Plain text

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

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

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

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

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

? Save preset as: ~/test
Plain text

また、環境にもよりますが、以下のような確認がでる場合があります。これは、「オリジナルの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
Plain text

完了すると、以下のように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
Plain text

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

🎉  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.
Plain text

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

$ cd firstapp
$ npm run serve
Plain text

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.
Plain text

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

welcom-vue-932x1024.png

関連記事

開発アプリ

nanolog.app
nanolog

毎日の小さな出来事をなんでも記録して、ログとして残すためのライフログアプリです。