はじめに
仕事で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
ソースコードはこちら
https://github.com/heihei-wooooo/sample-vue
※VSCodeの拡張機能のオススメはこちら
https://qiita.com/wooooo/items/aa205663dfbf4356871e