Vite+Vue3+TypeScript+Element Plusを作成する

高速な立ち上がりのViteにComposition API対応のVue3、型安全なTypeScriptにデスクトップ向けUIフレームワークのElement Plus環境を構築する手順です。

前書き

2021年7月時点、Vue2+Vuetify2の環境のプロジェクトを触っていると絶望する VuetifyのVue3対応2021年秋 に立ち向かうべく、お試し過程のメモです。

サンプルコード

vite-elemental-plus
https://github.com/yoshida-m-3/vite-elemental-plus

WSL2にパッケージマネージャのYarnをインストールする

WindowsのWSL2環境にパッケージマネージャーのYarnをセットアップする手順です。
既にセットアップ済みであればスキップします。

参考
https://docs.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl

# WSLに切り替える
wsl

# cURLをインストーする
sudo apt-get install curl

# nvmをインストールする
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

# nvmインストール確認 -> nvmと出力されればok（一度ターミナルを再起動すること）
command -v nvm

# 最新版のnodeをインストールする
nvm install node

# Yarnをインストールする
npm install -g yarn

Viteをインストールする

ViteからVue + TypeScriptのプロジェクトを作成します。

Vite
https://vitejs.dev/

$ yarn create vite
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@2.5.1" with binaries:
- create-vite
- cva
✔ Project name: … vite-project
✔ Select a framework: › vue
✔ Select a variant: › vue-ts

Scaffolding project in /home/makoto/projects/vite-elemental-plus/vite-project...

Done. Now run:

cd vite-project
yarn
yarn dev

Done in 6.75s.

Viteを実行する

実行できるか確認しています。
Hello Worldのデフォルト画面が表示されればOKです。

yarn dev

Element Plus

UIフレームワークのElement Plusを追加します。

参考
https://element-plus.org/#/jp/component/installation

yarn add element-plus -D
yarn add vite-plugin-style-import -D

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'element-plus',
        esModule: true,
        ensureStyleFile: true,
        resolveStyle: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
        resolveComponent: (name) => {
          return `element-plus/lib/${name}`;
        },
      }]
    })
  ]
})