Vue3 vscode 開発環境構築

Vue

Vue (発音は /vjuː/、view と同様) は、ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。

Vue アプリケーションの作成

Node.js の最新バージョンをインストールして、コマンドラインで次のコマンドを実行します

> npm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Scaffolding project in C:\sctree\vue-demo\vue-project...

Done. Now run:

  cd vue-project
  npm install
  npm run dev

依存関係をインストール

vue-project> npm install

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@vitejs/plugin-vue@5.0.3',
npm WARN EBADENGINE   required: { node: '^18.0.0 || >=20.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '8.5.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'vite@5.0.12',
npm WARN EBADENGINE   required: { node: '^18.0.0 || >=20.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '8.5.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'rollup@4.9.6',
npm WARN EBADENGINE   required: { node: '>=18.0.0', npm: '>=8.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '8.5.0' }
npm WARN EBADENGINE }

added 27 packages, and audited 28 packages in 20s

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

found 0 vulnerabilities

vscodeを起動

vue-project> code .

開発サーバーを起動

vue-project> npm run dev

vscodeの実行

プロダクション環境への出荷

vue-project> npm run build

> vue-project@0.0.0 build
> vite build

vite v5.0.12 building for production...
✓ 23 modules transformed.
dist/index.html                  0.43 kB │ gzip:  0.29 kB
dist/assets/index-WjEyzLJD.css   3.71 kB │ gzip:  1.19 kB
dist/assets/index-avtuWnnn.js   63.15 kB │ gzip: 25.07 kB
✓ built in 1.31s

vscode拡張機能

vscode自動提示より下記の拡張機能をインストールしたら、より自分が使いやすいコードエディタにすることができます。