はじめに
今回は前回インストールしたNode.jsと一緒にインストールされているパッケージマネージャーである「npm」を扱って、Vue.jsのプロジェクトファイルを作成するまでの手順を書いていきます。
事前準備
事前にNode.jsのインストールが必要です。尚、Vue CLI3.0ではNode.js(v8.9以上)が必要となります。もし、Node.jsがインストールできていなければ、以下の記事を参考にインストールしてみてください！
また、今回プロジェクトファイルをインストールする場所を用意しており、事前にlocal Disk(c)に「works」というフォルダを作成し、この中にプロジェクトフォルダを作成するようにしています。
Vue CLIのインストール準備
Vue.jsのプロジェクトファイルをコマンドライン操作で作成できるようにするために、
「Vue CLI(Commnad Line Interface)」
をインストールします。Vue CLIについては以下のサイトなどを確認してみてください。
コマンドプロンプト起動
Windowsのスタートボタンの近くにある検索ウィンドウに「cd」と入力すると出てきますので、起動します。
プロジェクトファイルを作成するディレクトリまで移動
以下のようにコマンドプロンプト上で、UNIXコマンドを使って、ディレクトリを移動します。UNIXコマンド分からない方は、写真の下に貼ってあるサイトなどで、調べてみてください(^^)
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」を押します。
ここで手順から少し逸れますが、なぜこのようなことを聞かれるのか、よくわからなかったので調べてみました。
では、手順に戻りましょう(^^;
Vue Routerのヒストリーモードを使用するか？
次に以下のように表示されます。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)翻訳(予想)：Vue Routerのヒストリーモードを使用するか？
いまいち分からない表現ですが、以下のサイトを見る感じだと作成するアプリなどのURL管理をしっかりしたいのであればyesのようなので、「y」を押して「Enter」押します。
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などが入っているらしいです）
設定ファイルを個別に設定するか？
次に以下のように表示されます。
? 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」で閉じます。
以上で終わりです、お疲れ様です！
長い記事をみてくださりありがとうございました。少しでも読んでくださった方のお役に立っていたら嬉しいです(^^)
今回参考にした記事を載せておきます。
おわりに
今回はかなり、長めの記事になったのかなと思っています。
以前書いた「MAMP環境でCakePHPをインストールする方法（初心者）」と同じかそれ以上に長い記事かもしれませんw
また、スクショしながらの操作は通常の倍くらいの時間が掛かってしまいますが、また同じことをやるときに調べる手間がなくなるので、面倒と思わずに手順を作成していき自分の財産的なものにしていけたらいいなと思います。
ここまで読んでくださり本当にありがとうございます！(;’∀’)
では、また！
コメント