개요

환경

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


> [email protected] 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

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


> [email protected] 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)

vue ui

프로젝트 시작

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

npm run serve

시작 후 화면

요약