Vue.js 超入門3.4+ 第1章 Vueの準備

https://scrapbox.io/files/66812ac240163e001db7bdf2.png

第1章 Vueの準備

code:javascript

~/src/vuejs via  v20.14.0

❯ node -v

v20.14.0

~/src/vuejs via  v20.14.0

❯ npm -v

10.7.0

~/src/vuejs via  v20.14.0

❯ yarn -v

1.22.22

Vite（ヴィート）: ビルドツール

Vue CLIでプロジェクトを作成

code:javascript

❯ npm create vue@latest

Need to install the following packages:

create-vue@3.10.4

Ok to proceed? (y) y

npx

create-vue

Vue.js - The Progressive JavaScript Framework

✔ Project name: … my-vue3-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 Prettier for code formatting? … No / Yes

✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in /Users/nobu/src/vuejs/my-vue3-todo...

Done. Now run:

cd my-vue3-todo

npm install

npm run format

npm run dev

yarnを使ってみた

code:javascript

❯ yarn install

yarn install v1.22.22

info No lockfile found.

warning eslint > @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead

warning eslint > @humanwhocodes/config-array > @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead

warning eslint > file-entry-cache > flat-cache > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported

warning eslint > file-entry-cache > flat-cache > rimraf > glob@7.2.3: Glob versions prior to v9 are no longer supported

warning eslint > file-entry-cache > flat-cache > rimraf > glob > inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.

success Saved lockfile.

✨ Done in 16.82s.

src/vuejs/my-vue3-todo via  v20.14.0 took 16s

❯ yarn format

yarn run v1.22.22

$ prettier --write src/

src/App.vue 114ms (unchanged)

src/assets/base.css 5ms (unchanged)

src/assets/main.css 2ms (unchanged)

src/components/HelloWorld.vue 22ms (unchanged)

src/components/icons/IconCommunity.vue 2ms (unchanged)

src/components/icons/IconDocumentation.vue 1ms (unchanged)

src/components/icons/IconEcosystem.vue 1ms (unchanged)

src/components/icons/IconSupport.vue 1ms (unchanged)

src/components/icons/IconTooling.vue 1ms (unchanged)

src/components/TheWelcome.vue 6ms (unchanged)

src/components/WelcomeItem.vue 6ms (unchanged)

src/main.ts 2ms (unchanged)

✨ Done in 0.57s.

src/vuejs/my-vue3-todo via  v20.14.0

❯ yarn dev

yarn run v1.22.22

$ vite

VITE v5.3.2 ready in 254 ms

➜ Network: use --host to expose

➜ press h + enter to show help

立ち上がった

https://scrapbox.io/files/66812bfe4054bb001c45086b.png

ポート番号を変えたい場合、vite.config.tsの中にServerの設定を追記する

code:javascript

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

export default defineConfig({

...

resolve: {

...

},

server: {

port: 3000,

},

})