Zenn
Closed9

Vue を試してみる @Mac

macOS
Vue 3
sutoneasutonea

最新版の Node.js を pkg ファイルからインストール

https://nodejs.org/en から pkg ファイルをダウンロードし、ダブルクリックでインストールした。

インストール後のバージョン確認結果は以下。昔入れていた古い node ではなく、最新が参照されているようだ

% node --version
v20.9.0
sutoneasutonea

作業ディレクトリの作成

sutonea@mac-2018 node_dir % mkdir vue_sandbox
sutonea@mac-2018 node_dir % cd vue_sandbox
sutonea@mac-2018 vue_sandbox % npm create vue@latest
sutoneasutonea

Vue プロジェクト作成結果

sutonea@mac-2018 vue_sandbox % npm create vue@latest
Need to install the following packages:
create-vue@3.8.0
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … keputonea
✔ 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

Scaffolding project in /Users/sutonea/dev/node_dir/vue_sandbox/keputonea...

Done. Now run:

  cd keputonea
  npm install
  npm run format
  npm run dev

npm notice
npm notice New minor version of npm available! 10.1.0 -> 10.2.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.1
npm notice Run npm install -g npm@10.2.1 to update!
npm notice
sutonea@mac-2018 vue_sandbox %

上記に従って npm もアップデートした

sutonea@mac-2018 vue_sandbox % sudo npm install -g npm@10.2.1
Password:

changed 45 packages in 4s

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

アップデート結果

sutonea@mac-2018 vue_sandbox % npm --version
10.2.1
sutoneasutonea

ディレクトリ構造の確認

.
└── keputonea
    ├── README.md
    ├── env.d.ts
    ├── index.html
    ├── package.json
    ├── public
    │   └── favicon.ico
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   ├── base.css
    │   │   ├── logo.svg
    │   │   └── main.css
    │   ├── components
    │   │   ├── HelloWorld.vue
    │   │   ├── TheWelcome.vue
    │   │   ├── WelcomeItem.vue
    │   │   └── icons
    │   │       ├── IconCommunity.vue
    │   │       ├── IconDocumentation.vue
    │   │       ├── IconEcosystem.vue
    │   │       ├── IconSupport.vue
    │   │       └── IconTooling.vue
    │   ├── main.ts
    │   ├── router
    │   │   └── index.ts
    │   └── views
    │       ├── AboutView.vue
    │       └── HomeView.vue
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    └── vite.config.ts

8 directories, 25 files
sutoneasutonea

アプリケーションの立ち上げ

以下の手順で立ち上がるらしい。

> cd <your-project-name>
> npm install
> npm run dev

なので試す。


  VITE v4.5.0  ready in 696 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

sutoneasutonea

エディタについて

推奨環境の Visual Studio Code + Volar extension を整えた

sutoneasutonea

最後に git リポジトリとして初期化し、git add --all, git commit して、環境構築は終わり。

このスクラップは2023/10/29にクローズされました