毎回調べるのが面倒なのでVueのベースプロジェクトを作成する

特にタイトル以上に説明することもないので、進めていく。

Viteを使用しVueをインストールする

下記コマンドでVite（ヴィート）を使用しVueをインストールすることができる。

$ npm create vite@latest
Need to install the following packages:
  create-vite@3.1.0
Ok to proceed? (y)
√ Project name: ... VueProjectBase
√ Package name: ... vue-project-base
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in C:\Users\username\Desktop\vite\VueProjectBase...

Done. Now run:

  cd VueProjectBase
  npm install
  npm run dev

今回はVueプロジェクなので、frameworkはVueを指定し、もう考えることなくTypeScriptを指定する。

で、上記のように指示に従いlocal serverを立ち上げることができればVueのインストールは完了。

nodeのバージョンを指定する

nodeのバージョン管理ツールにVolta使用しているので、Node エンジンの固定をする。

volta pin node
volta pin npm

上記を実行するとpackage.jsonに、

 "volta": {
"node": "16.18.0",
"npm": "8.19.2"
}

と記入され、Volta の設定が記述されたpackage.jsonをチームで共有することで、全員の Node や npm、Yarn のバージョンを揃えることができる。

Tailwind.cssを導入する

もうクラス名を考えたくないので、基本的にtailwindを使用している。

ということで本プロジェクトにデフォルトで入れる。

インストール方法は公式（Install Tailwind CSS with Vite）に従う。

Install Tailwind

下記コマンドを順に実行する。

やっていることは、tailwindのインストールと設定ファイルの作成。

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Configure your template paths

続いて、パスを構成する。

tailwind.config.cjsを、

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

上記のように修正。

Add the Tailwind directives to your CSS

最後に、./src/style.cssにtailwindを追加する。

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

これでtailwindが有効になった。

SVGをコンポーネント化する

SVGの取り扱いについても面倒なので、ライブラリに頼る。

いままではvue-svg-spriteを使っていたのだが、設定が面倒くさい＆今回はViteでプロジェクトを作成したので、vite-svg-loaderを入れる。

まあ、vue-svg-spriteはいろいろ設定できて便利だったけど、正直そこまでSVG使わないので。

install vite-svg-loader

npm install vite-svg-loader -D

上記のコマンドでインストールする。

続いて、設定していく。

vite.config.tsに

import svgLoader from 'vite-svg-loader'

上記をインポートし、pluginsの箇所に、

svgLoader()

を追加する。

結果的に、下記のようになっていれば問題ない。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from 'vite-svg-loader'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), svgLoader()]
})

これで設定は完了なので、あとは使用していく。

3つの使用方法

URL、文字列、コンポーネント、それぞれ３つの方法でインポートすることができる。

試しにやってみる。

下記のようにインポートして、

import iconUrl from "./assets/vue.svg?url";
import iconRow from "./assets/vue.svg?raw";
import IconComponent from "./assets/vue.svg?component";

下記のように使用する。

  <img :src="iconUrl" class="logo vue" alt="Vue logo" />
  <div v-html="iconRow"></div>
  <IconComponent />

デフォルトはコンポーネントなので、パラメーターが明示されていない時はコンポーネントで使用となる。

使用するのはこれくらいかしら。

コードのフォーマット系は別にまとめる。

作成したプロジェクトはこちら。

# 毎回調べるのが面倒なのでVueのベースプロジェクトを作成する