📝
Vue.js 3 & Vite の App 作成手順
環境
- macOS：Monterey
- バージョン：12.5.1
事前準備
nodebrewをインストール
# インストール
$ brew install nodebrew
# nodebrewがインストールされたか確認
$ nodebrew -v
# npmも一緒にインストールされているか確認
$ npm -v
# セットアップ
$ nodebrew setup
# 以下のexport文を~/.zshrcもしくは~/.bash_profileに追記
$ vim ~/.zshrc
# export PATH=$HOME/.nodebrew/current/bin:$PATH
# 反映
$ source ~/.zshrc
nodeをインストール
# nodeをインストール
$ nodebrew install stable
# インストール済みのnodeバージョンの一覧を表示
$ nodebrew ls
$ nodebrew use 使用するnodeのバージョン
# ex) nodebrew use v18.8.0
Vue.jsをインストール
$ npm install -g @vue/cli
$ vue --version
Vue.jsのプロジェクトを作成
npm create vue@latest
✔ Project name: … invest-simulator.com
✔ Add TypeScript? … Yes
✔ Add JSX Support? … Yes
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes
$ cd プロジェクト名
ライブラリを導入
【UIライブラリ】Headless UI
Headless UI - Unstyled, fully accessible UI components
terminal
npm install @headlessui/vue
【UIライブラリ】Chakra UI
【CSSフレームワーク】Tailwind CSS
terminal
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
./src/assets/main.css
@import './base.css';
/* ... */
@tailwind base;
@tailwind components;
@tailwind utilities;
./src/views/HomeView.vue
<template>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>
【CSSフレームワーク】Vuetify
npm install vuetify
Chart.js
npm install chart.js
npm install vue-chartjs
npm install @types/chart.js -D
【CSSフレームワーク】Flowbite
npm install flowbite
起動
cd プロジェクト名
npm install
npm run format
npm run dev
http://localhost:5173/ にアクセスすると以下の画面が表示されます。
Discussion