はじめに
Windi.CSSを使ってみたくてVite + Vue3 + Windi.CSSで環境構築をしたので手順をまとめました。
Windi.CSSについては別で記事を書きます
プロジェクト作成
今回はnpmを使ってインストールしました。
$ npm init @vitejs/app
? Project name: › windi-sample
vanilla
❯ vue
react
preact
lit-element
svelte
? Select a variant: › - Use arrow-keys. Return to submit.
❯ vue
vue-ts
プロジェクト名はお好きにつけてください。（僕はwindi-sampleにしました）
ライブラリはvueを選びました。(vanillaはネイティブのJSらしいです)
$ npm init @vitejs/app
npx: 6個のパッケージを2.176秒でインストールしました。
✔ Project name: … windi-sample
✔ Select a framework: › vue
✔ Select a variant: › vue
Scaffolding project in /Users/tsukiyama/windi-sample...
Done. Now run:
cd windi-sample
npm install
npm run dev
無事に作成できたので指定されたコマンドを打ちます
$ cd windi-sample
$ npm install
$ npm run dev
> @0.0.0 dev /Users/tsukiyama/windi-sample
> vite
Pre-bundling dependencies:
vue
(this will be run only when your dependencies or config have changed)
vite v2.3.7 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
npm run devも実行できたのでコントロール+Cで抜けます
Windi CSS インストール
ここから公式ドキュメントに沿ってWindi.CSSのインストールをしていきます。
$ npm i vite-plugin-windicss -D
npm WARN @0.0.0 No description
npm WARN @0.0.0 No repository field.
npm WARN @0.0.0 No license field.
+ vite-plugin-windicss@1.0.4
added 31 packages from 35 contributors and audited 88 packages in 3.742s
11 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
次にvite.config.jsを編集します(コメント箇所を追記しました)
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from "vite-plugin-windicss" // <- windicss を import
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
WindiCSS(), // <- WindiCSSを追加
],
});
最後にsrc/main.jsでvirtual:windi.cssをimportします。(コメント箇所を追記しました)
main.js
import { createApp } from 'vue'
import App from './App.vue'
import "virtual:windi.css" // <- windi.css を import
createApp(App).mount('#app')
これでWindi.CSSが使えるようになりました。
使ってみる
ソースコード
App.js
<template>
<div class="py-10">
<img alt="Vue logo" class="mb-4 mx-auto" src="./assets/logo.png" />
<h1 class="font-bold text-2xl italic text-center mb-8">
Vite + Vue3 + Windi.CSS
</h1>
<a
href="https://windicss.org/"
class="bg-gradient-to-r from-green-400 to-blue-500 w-200px block mx-auto px-4 py-3 text-white text-center italic rounded cursor-default transition-all duration-400 hover:rounded-2xl"
>
Windi.CSS
</a>
</div>
</template>
画面
ボタンのスタイルは公式ドキュメントに載っているのをそのまま使いました
さいごに
Windi.CSSを使ってみたくて環境構築をしました
まだ使いこなせていないので、また別でWindi.CSSについての記事を書いていきます
みなさんも良いWindiライフを
おわり
↧