viteでの環境構築メモ | ベース編

viteでの環境構築メモ(*´ω｀*)

この記事のベース編(*´ω｀*) - viteでの環境構築メモ | まとめ - くらげになりたい。

ベース

fnm/pnpm

# fnm
$ brew install fnm
$ echo 'eval "$(fnm env --use-on-cd)"' >> ~/.bashrc
$ fnm install v16
$ fnm default v16

# pnpm
$ brew install pnpm

• Node.jsバージョン管理にfnmを利用する - くらげになりたい。
• Fast, disk space efficient package manager | pnpm
• Schniz/fnm: 🚀 Fast and simple Node.js version manager, built in Rust

vite/vue

# vite/vue
$ pnpm create vite vue-app --template vue-ts
$ cd vue-app
$ echo "auto-install-peers=true" > .npmrc
$ node --version > .node_version
$ pnpm add -D ts-node @vitejs/plugin-vue

• vite/vueでChrome拡張機能を作ってみる｜1. Hello World編 - くらげになりたい。
• Vite | 次世代フロントエンドツール
• Vue.js - The Progressive JavaScript Framework | Vue.js

tailwindcss

• Install Tailwind CSS with Vite - Tailwind CSS

$ pnpm add -D tailwindcss postcss autoprefixer
$ pnpx tailwindcss init -p

tailwind.config.cjsの追加

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./pages/*.html", "./src/**/*.{vue,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.cjsの追加

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

• Nesting | Using with Preprocessors - Tailwind CSS

tailwind.cssの追加

@tailwind base;
@tailwind components;
@tailwind utilities;

iconify

• Iconify - all open source icons in one framework
• Iconify for Vue

$ pnpm add -D @iconify/vue