MacでVue.js+TypeScriptの環境構築する

# はじめに
仕事でVue.js＋TypeScriptで開発することになったので
VSCodeを用いて、開発環境を構築してみる

※参考記事
・Vue.jsの環境構築
  https://future-architect.github.io/typescript-guide/vue.html

# 前提条件
下記をインストールしていること
・Node.js
・npm
・yarn
・Vue CLI
・VSCode
・Google Chrome

# 環境構築手順

```
// 1.Vue.jsのテンプレート作成
npx @vue/cli@next create myapp

// 2.TypeScriptの場合は、「Manually select features」を選択
Vue CLI v5.0.0-rc.1
? Please pick a preset: (Use arrow keys)
 Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
❯ Manually select features 

// 3.「Choose Vue version」、「Babel」、「TypeScript」、「Router」、「Vuex」、「Linter / Formatter」を選択
（対象の項目でスペースキー押下で複数選択）

// ? Check the features needed for your project: (Press <space> to select, <a> to to
ggle all, <i> to invert selection, and <enter> to proceed)
❯◉ Choose Vue version
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

//4.「3.x」を選択
? Choose a version of Vue.js that you want to start the project with 
  2.x 
❯ 3.x 

// 5.Nを選択
? Use class-style component syntax? (y/N) 

// 6.Yを選択
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfil
ls, transpiling JSX)? (Y/n) 

// 7.Yを選択
? Use history mode for router? (Requires proper server setup for index fallback i
n production) (Y/n) 

// 8.「ESLint + Prettier」を選択
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

// 9.好みに合わせて選択
   Lint on save（保存時のLint実行）
   Lint and fix on commit（コミット時のLint実行）
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i>
 to invert selection, and <enter> to proceed)
 ◉ Lint on save
❯◯ Lint and fix on commit

// 10.「In dedicated config files」を選択
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 

// 11.今回の設定内容を保存したい場合は"y"
Save this as a preset for future projects? (y/N)
```

下記のようになればOK

```
Vue CLI v5.0.0-rc.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Rout
er, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfil
ls, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback i
n production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config
 files
? Save this as a preset for future projects? No


Vue CLI v5.0.0-rc.1
✨  Creating project in /Users/shohei/git/sample-vue/myapp.
⚙️  Installing CLI plugins. This might take a while...


added 879 packages, and audited 880 packages in 1m

90 packages are looking for funding
  run `npm fund` for details

7 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
🚀  Invoking generators...
📦  Installing additional dependencies...


added 116 packages, and audited 996 packages in 22s

107 packages are looking for funding
  run `npm fund` for details

7 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd myapp
 $ npm run serve
```

サーバ起動して、「http://localhost:8080/ 」にアクセスしてみましょう

```
xxx:sample-vue user$ cd myapp
xxx:myapp user$ npm run serve

> myapp@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
[1%] setup (initialize)
(node:20927) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.


 DONE  Compiled successfully in 20902ms                                  10:12:35


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.43.22:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

No issues found.
```

下記のように画面表示されればOK
![スクリーンショット 2021-12-31 10.15.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/603047/cc71148c-db0b-44d7-cdba-2e6b5b155cf4.png)

ソースコードはこちら
https://github.com/heihei-wooooo/sample-vue

※VSCodeの拡張機能のオススメはこちら
https://qiita.com/wooooo/items/aa205663dfbf4356871e