【備忘録】vue-cliインストールしてベースプロジェクトを作る

概要

久しぶりにVue.jsで新しくアプリを作ろうと思い立って、
vue-cli 使ってベースのアプリを作ろうと思ったら手順を完全に忘れていた。

今後のためにも、備忘録を作っておこうと思う。

環境

• vue-cli 4.1.2

vue-cliインストール（グローバル）

# インストール実行
npm install -g @vue/cli

# インストール成功したか確認
vue --version
# @vue/cli 4.1.2

プロジェクト作成

# プロジェクト作成実行
vue create gtd_mock

# https://npm.taobao.org/ というnpmのミラーサーバーを利用してよいか？という内容
# 調べるとこれが原因でこける事例もあるので、使わない設定にした
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? No

Vue CLI v4.1.2
# プラグイン設定
# babel,eslint のみのデフォルト設定かマニュアル設定をするか？という内容
# Vue-Routerなど利用したかったので、マニュアル設定
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter

# TypeScript 利用時に、コンポーネントをクラスで定義する構文を利用する設定
? Use class-style component syntax? Yes

# BabelをTypeScriptにも適用
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

# Vue-Router の historyモードは利用しない
? Use history mode for router? (Requires proper server setup for index fallback in production) No

# 使用するCSSプリプロセッサの指定
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)

# lint と formatter の指定（ESLint + Prettier）
? Pick a linter / formatter config: Prettier

# ESLintの追加設定
? Pick additional lint features: Lint on save

# 設定内容をpackage.jsonにまとめるか、別ファイルに分けるか
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

# 今回の設定を保存するか（次回作成時のため）
? Save this as a preset for future projects? Yes

作成時ログ（正常終了）

Vue CLI v4.1.2
✨  Creating project in C:\develop\repo\gtd_mock\gtd_mock.
⚙  Installing CLI plugins. This might take a while...


> yorkie@2.0.0 install C:\develop\repo\gtd_mock\gtd_mock\node_modules\yorkie
> node bin/install.js

setting up Git hooks
can't find .git directory, skipping Git hooks installation

> core-js@3.6.4 postinstall C:\develop\repo\gtd_mock\gtd_mock\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall C:\develop\repo\gtd_mock\gtd_mock\node_modules\ejs
> node ./postinstall.js

added 1155 packages from 836 contributors and audited 32980 packages in 123.389s
found 0 vulnerabilities

🚀  Invoking generators...
📦  Installing additional dependencies...

added 84 packages from 69 contributors and audited 35404 packages in 31.178s
found 0 vulnerabilities

⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd gtd_mock
 $ npm run serve

※プロジェクト作成（GUI）

以下のコマンドを実行することで、GUIでプロジェクト作成するWeb画面が立ち上がる（コマンドでやるより簡単）

vue ui

プロジェクト起動

# プロジェクト作成時のログの最後に出力されるコマンド
cd gtd_mock

npm run serve

起動後の画面

まとめ

あまり頻繁にやらないので、ふとやろうと思った時に忘れてしまっていた。
こんなことを避けるためにも備忘録として残すように習慣づけたい。。。