npmでVueCLIをインストールしてVueのプロジェクトを作る(Manually select features)

はじめに

今回は前回インストールしたNode.jsと一緒にインストールされているパッケージマネージャーである「npm」を扱って、Vue.jsのプロジェクトファイルを作成するまでの手順を書いていきます。

事前準備

事前にNode.jsのインストールが必要です。尚、Vue CLI3.0ではNode.js(v8.9以上)が必要となります。もし、Node.jsがインストールできていなければ、以下の記事を参考にインストールしてみてください！

kuramasa-blog

Windows10環境にNode.jsをインストールする方法Windows10環境にNode.jsをインストールする方法について説明しています。

また、今回プロジェクトファイルをインストールする場所を用意しており、事前にlocal Disk(c)に「works」というフォルダを作成し、この中にプロジェクトフォルダを作成するようにしています。

Vue CLIのインストール準備

Vue.jsのプロジェクトファイルをコマンドライン操作で作成できるようにするために、

「Vue CLI(Commnad Line Interface)」

をインストールします。Vue CLIについては以下のサイトなどを確認してみてください。

アールエフェクト

これでわかるはじめてのVue CLI | アールエフェクトはじめてVue CLIを使った開発を行おうとした場合、ファイル構成もわからないためなにを更新するばどのようなことがおこるかもわからないものです。本文書では開発プロジェ...

コマンドプロンプト起動

Windowsのスタートボタンの近くにある検索ウィンドウに「cd」と入力すると出てきますので、起動します。

プロジェクトファイルを作成するディレクトリまで移動

以下のようにコマンドプロンプト上で、UNIXコマンドを使って、ディレクトリを移動します。UNIXコマンド分からない方は、写真の下に貼ってあるサイトなどで、調べてみてください(^^)

TechAcademyマガジン - 教育×テクノロジーのWebメディア

初心者でも覚えておきたい基本的なUNIXコマンド一覧20 | TechAcademyマガジン初心者でもこれだけは覚えておきたい【UNIXコマンド】を一覧で20紹介。UNIXコマンドとは何なのか？から解説。Macのターミナルで入力した例もあるので、記事を見ながらディ...

Vue CLIのインストール

ディレクトリの移動ができたら、以下のコマンドを入力します。

PS C:\works> npm install -g @vue/cli

入力したら、「Enter」押すとインストールが始まります。インストール中は以下のような感じです。

インストールが完了すると以下のように表示されます。

Vue CLIインストール確認作業

無事にインストールされているか確認します。

そのまま以下を入力し、「Enter」を押します。

PS C:\works>vue --version

すると以下のようにVue CLIのバージョンが表示されていればOKです。

Vue.jsのプロジェクトフォルダをマニュアル操作で作成

今回は「sample」という名前のプロジェクトフォルダを作成してみます。

プロジェクトの作成

コマンドプロンプトはそのままのディレクトリで、以下を入力し、「Enter」押します。

PS C:\works> vue create sample

次に以下の画面が表示されます。

出てきた記述は以下のように聞いています。

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

翻訳(予想)：より早くインストールできるリポジトリを使う？

早くインストールできるならいいのではないかということで、「y」を押して「Enter」押します。(これでyesと答えたことになります。)

インストール方法を選択

次に以下のように表示されます。

? Please pick a preset: (Use arrow keys)
　default (babel, eslint)
> Manually select features

翻訳(予想)：インストール手順のプリセットを選べ

今回は、ここで細かく設定しながらインストールしていくので、キーボードの上下で「>」マークを動かして「Manually select features」選択して、「Enter」で決定します。

ライブラリ選択

次に以下のように表示されます。

? 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

翻訳(予想)：どのライブラリを使用するか？

キーボードの上下でライブラリを選択して、必要な項目に「Space」キーでチェック（*をつける）し、「Enter」押します。

今回は[Babel],[Linter / Formatter]はデフォルトで選択されているのでそのままで、他にTypeScriptやユニットテストなども勉強で扱ってみたい為各々チェックを入れてみました。

クラススタイルのコンポーネント構文にするか？

次に以下のように表示されます。

class-style component syntax?→yes

翻訳(予想)：クラススタイルのコンポーネント構文にしますか？

オブジェクト指向で記述することを言っているのかな？と個人的には解釈したので、「y」を押して「Enter」を押します。

TypeScriptの記述をバベルでJavascriptのバージョンを下げてJavascriptに変換するか？

次に以下のように表示されます。

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

翻訳(予想)；TypeScriptでできたJavascriptに対してバベルでバージョンを下げるか？

今回はTypescriptをいれているので「y」を押して「Enter」を押します。

ここで手順から少し逸れますが、なぜこのようなことを聞かれるのか、よくわからなかったので調べてみました。

Typescriptの記述をbabelが変換しJavascriptにしてくれるようです。その際に、Javascriptの最新バージョンであるES6などの記述方法に変換されるようです。最新なら一見良さそうですが、新しすぎて一部のブラウザで対応できていない記述があるため、変換時にES6など最新版で変換せずにES5など古いバージョンのJavascriptの記述で変換した方が安定的なので、このような質問がされているようです。詳しくは以下の記事を見てみてください。

Playground発！アプリ開発会社の技術ブログ

【初めての】TypeScriptを使うべき3つのメリットと使い方｜Playground発！アプリ開発会社の技術ブログ「なぜJavaScirptではなくTypeScriptで書いたほうがいいんだろう」という疑問にお答えします。ズバリ、メリットは3つ。①「型宣言」によって開発効率を上げられる②「クラス...

Qiita

@babel/preset-typescriptを使ってTypeScriptを変換する - Qiita はじめに @babel/preset-typescriptというBabelのプリセットが出て以来、tscコマンドではなくBabelによって、TypeScriptで書いたコードをJavaScriptに変換できるように...

では、手順に戻りましょう(^^;

Vue Routerのヒストリーモードを使用するか？

次に以下のように表示されます。

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

翻訳(予想)：Vue Routerのヒストリーモードを使用するか？

いまいち分からない表現ですが、以下のサイトを見る感じだと作成するアプリなどのURL管理をしっかりしたいのであればyesのようなので、「y」を押して「Enter」押します。

Qiita

Vue CLI の変更点・使い方(vue-cliから@vue/cliにアップデート) - Qiita はじめに 2018/8/10に待望のVue CLIのバージョン3.0.0がリリースされましたので、早速アップデートして使ってみたいと思います。 今回のバージョンは、大きなアップデ...

Sassの種類を選択

次に以下のように表示されます。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)  

  Sass/SCSS (with dart-sass)

> Sass/SCSS (with node-sass)  

  Less  Stylus

翻訳(予想)：Sassの種類を選べ

「Sass/SACC (node-sass)」を上下で選択し、「Enter」押します。

Linter / Formatter に何を使うか？

次に以下のように表示されます。

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

翻訳(予想)：Linter / Formatter に何を使うか？

今回は一番上の「ESLint with error prevention only」を上下で選択して「Enter」押します。

最初にLinter / Formatter を選択した場合にこれを聞かれます。

Lintの発動条件はどちらにするか？

次に以下のように表示されます。

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

翻訳(翻訳)：Lintの発動条件はどちらにするか？

一番上の「Lint on save」を上下で選択し、「Enter」押します。（ファイルを保存操作した際に発動します）

Lintについては以下の記事などを参考にしてみてください。コードの記述に異常がないかを確認するものと認識しておくといいと思います。

ユニットテストをどのライブラリで行うか？

? Pick a unit testing solution: (Use arrow keys)
  Mocha + Chai
> Jest

翻訳(予想)：ユニットテストをどのライブラリで行うか？

上下で「Jest」を選択し、「Enter」押します。 （JestにはMochaなどが入っているらしいです）

あわせて読みたい

Jest · 🃏 Delightful JavaScript Testing

わくわくBank

JavaScript｜ユニットテストツール「Jest」の使い方 - わくわくBankFacebookがオープンソースとして開発しているJestを利用して、ユニットテスト行う方法について確認します。導入方法、主なMatcher、モックの利用方法など取り上げます。

設定ファイルを個別に設定するか？

次に以下のように表示されます。

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

翻訳(予想)：設定ファイルを個別に設定するか？

個別に設定してみたいので、一番上の「In dedicated config files」を上下で選択して、「Enter」押します。

これらの設定をプリセットとして保存するか？

次に以下のように表示されます。

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

翻訳(予想)：これらの設定をプリセットとして保存するか？

プリセットに設定してみるので、「y」押して、「Emter」を押します。

プリセット名を決める

次に以下のように表示されます。

? Save preset as: [ここには日付を入れてみます]


例：
? Save preset as: 20200806

翻訳(予想)：プリセット名は何にするか？

今回は例のように日付をつけてみました。 （以後新しくプロジェクトを作る際のプリセットとして保存できる）

問題なければ「Enter」を押すと、プロジェクトのインストールが始まります。

追記：プリセット（ここまでの一連のセッティング）に名前を付けて保存しておけるようで、この後、別でプロジェクトを作成しようとしたときに、最初のプロジェクト作成する際に開かれる画面に今回の記事で設定したプリセット名が以下のように表示されました。なので、これを選択すれば自動でプロジェクトを作ってくれるのかもしれません。

プロジェクトのインストール

以下は、プロジェクトファイル作成中の様子

インストールが完了すると以下のように表示されます。

プロジェクトの起動とインストール確認

このままプロジェクトを起動して、インストールの確認作業をします。

以下のように作成したプロジェクトフォルダ名までディレクトリを移動させます。

以下を入力し、「Enter」押します。

C:\works\sample> npm run serve

すると、画面が動き始めます。

途中に以下のようなアクセス許可を聞かれるかもですが、「アクセスを許可する」をクリックします。

起動が完了すると以下のようにプロジェクトファイルが起動します。

では、上の画面に表示されているローカルサーバーにアクセスしてみます。

App running at:
  - Local:   http://localhost:8080/  ←このURL
  - Network: http://192.168.3.20:8080/

以下のURLをブラウザに貼り付けます。

http://localhost:8080/

以下のようにVue.jsのアイコンが表示されていればOKです。

コマンドプロンプトを終了させる

最後にコマンドプロンプトを終了させましょう。

「Ctrl」+「c」 で以下のように表示されるので、「y」押して、「Enter」押します。

vueのプロジェクト作成から抜けて、以下のように表示されたら、ウィンドウの「x」で閉じます。

以上で終わりです、お疲れ様です！

長い記事をみてくださりありがとうございました。少しでも読んでくださった方のお役に立っていたら嬉しいです(^^)

今回参考にした記事を載せておきます。

あわせて読みたい

Vue CLIを使ってVue.jsをはじめよう！Vue CLIを使ってVue.jsをインストールする方法を紹介します。簡単なステップで始められるので、Vue.jsをはじめる第一歩の参考になれば幸いです。

Qiita

@vue/cli を初めて触ったのでメモ - Qiita はじめに 初めて Vue を使う私が、 @vue/cli でプロジェクトを作る際に、 設定がどう反映するのか気になったので調べてみた記録です。 Vue CLI 3 を使うと、 以下のよ...

おわりに

今回はかなり、長めの記事になったと思っています。

以前書いた「MAMP環境でCakePHPをインストールする方法（初心者）」と同じかそれ以上に長い記事かもしれませんw

また、スクショしながらの操作は通常の倍くらいの時間が掛かってしまいますが、また同じことをやるときに調べる手間がなくなるので、面倒と思わずに手順を作成していき自分の財産的なものにしていけたらいいなと思います。

ここまで読んでくださり本当にありがとうございます！(;’∀’)

では、また！