特にタイトル以上に説明することもないので、進めていく。
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、文字列、コンポーネント、それぞれ3つの方法でインポートすることができる。
試しにやってみる。
下記のようにインポートして、
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 />
デフォルトはコンポーネントなので、パラメーターが明示されていない時はコンポーネントで使用となる。
使用するのはこれくらいかしら。
コードのフォーマット系は別にまとめる。
作成したプロジェクトはこちら。