📝

Vue.js 3 & Vite の App 作成手順

2022/09/04に公開

環境

  • 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

Installation - 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

ログインするとコメントできます