Vue.js 初期設定メモ
中井圭輔Vueプロジェクトの作成
Node.jsをインストールする（省略）。
Node.jsがインストールされていることを確認する。
C:\hoge> node -v
v16.17.1
Vueプロジェクトを作成したい場所を作業ディレクトリに設定する（ここではCドライブ）。
C:\hoge> cd \
C:\>
次のコマンドを実行してプロジェクトを作成する。
C:\> npm create vue@latest
すると以下のような質問が表示されるのでYesかNoを選んでいく。よく分からなければEnterを連打してNoを選ぶ。ここではProject nameだけをvue-todoに変更した（デフォルトだとvue-project）。
Vue.js - The Progressive JavaScript Framework
√ Project name: ... vue-todo <-ここだけ変更した
√ 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
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes
質問に全て答えると、作業ディレクトリにプロジェクトvue-todoが作成される。
Cドライブ
└── vue-todo
├── node_modules
├── public
│ └── favicon.ico
├── src
│ ├── assets
│ ├── components
│ │ ├── icon
│ │ │ ├── IconCommunity.vue
│ │ │ └── ...
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ └── WelcomeItem.vue
│ ├── App.vue
│ └── main.js
├── .gitignore
├── index.html
├── package.json
├── README.md
⋮
以下のコマンドでVue.jsを動作させるために必要なパッケージをインストールする。
C:\> cd vue-todo
C:\vue-todo> npm install
ローカルの開発サーバーを起動する。
C:\vue-todo> npm run dev
開発サーバー起動後に表示されるURLhttp://127.0.0.1:5173/にアクセスすると、VueのマークやYou did it!などと書かれたページが表示される。
不要な記述、ファイルを消す
index.htmlファイルを以下のように編集する。
<!DOCTYPE html>
- <html lang="en">
+ <html lang="en">
<head>
<meta charset="UTF-8">
- <link rel="icon" href="/favicon.ico">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
App.vueファイルの<script>、<template>、<style>タグの間をそれぞれ全て消す。
<script setup>
// この間全部消す
</script>
<template>
<!-- この間全部消す -->
</template>
<style scoped>
/* この間全部消す */
</style>
main.cssファイルの中身を全て消す。
/* 中身全部消す */
componentsディレクトリの中のディレクトリとファイル、favicon.ico、base.css、logo.svgファイルを全て削除する。
Cドライブ
└── vue-todo
├── node_modules
├── public
- │ └── favicon.ico
├── src
│ ├── assets
- │ │ ├── base.css
- │ │ ├── logo.svg
│ │ └── main.css
│ ├── components
- │ │ ├── icon
- │ │ │ ├── IconCommunity.vue
- │ │ │ └── ...
- │ │ ├── HelloWorld.vue
- │ │ ├── TheWelcome.vue
- │ │ └── WelcomeItem.vue
│ ├── App.vue
│ └── main.js
├── .gitignore
├── index.html
├── package.json
├── README.md
⋮
これですっきりした。あとはお好きなように...
フォーマッター（任意）
VSCodeの拡張機能Prettierをインストールする。
左下の歯車＞Settingsをクリックして設定を開く。必要に応じてUserかWorkspaceを切り替える。
Default Formatterを検索し、Prettierを指定する。
Format On Saveを検索し、チェックをつけて有効にする。
これで変更を保存するたびにコードを整形してくれる。
参考