Vue.js3 基礎

インストール & 初期開発画面

npm init vue@latest

# セットした内容
✔ 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
✔ Add Prettier for code formatting? … No / Yes
# ===

npm install -g npm@9.6.6
npm i
npm run build

これで、初期開発画面が立ち上がる。

全体の構造

開発画面が立ち上がったところで、全体のディレクトリ構造を見てみる。

Reactにとても似てきたw。src/main.js が一番の「ルート」のようだ。app.mount もされている。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(router)

app.mount('#app')

https://ja.vuejs.org/api/sfc-script-setup.html#using-custom-directive

defineProps() & defineEmits()