TypeScriptでReactを使う場合は型定義を記載しますが、カリー化する場合の型定義の仕方は少々分かりづらいです。 React Hookをカリー化する コンポーネントを生成するにあたってカリー化…
高速な立ち上がりのViteにComposition API対応のVue3、型安全なTypeScriptにデスクトップ向けUIフレームワークのElement Plus環境を構築する手順です。
前書き
2021年7月時点、Vue2+Vuetify2の環境のプロジェクトを触っていると絶望する VuetifyのVue3対応2021年秋
に立ち向かうべく、お試し過程のメモです。
もう、いっそのことUIフレームワークごと乗せ換えちゃう?
Vue3なら、もうTypeScript使いたいよね?
VueCLIじゃなくて、これからはViteでしょ?
Vue3なら、もうTypeScript使いたいよね?
VueCLIじゃなくて、これからはViteでしょ?
サンプルコード
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}`; }, }] }) ] })
コメントを書く