vue3+elementPlus プロジェクトの構築

1.vue3をインストールする

npm init vue@latest

プロジェクト名: プロジェクト名、デフォルト値: vue-project、希望のプロジェクト名を入力できます。ここでは中国語は推奨されません。
TypeScript を追加しますか? TypeScript コンポーネントを追加しますか? デフォルト値: いいえ。
JSX サポートを追加しますか? JSX サポートを追加しますか? デフォルト値: いいえ。
シングルページアプリケーション開発用に Vue Router を追加しますか? シングルページアプリケーション開発用に Vue Router ルーティング管理コンポーネントを追加しますか? デフォルト値: いいえ。
状態管理のために Pinia を追加しますか? 状態管理のために Pinia コンポーネントを追加しますか? デフォルト値: いいえ。
単体テストに Vitest を追加しますか? 単体テストに Vitest を追加しますか? デフォルト値: いいえ。
エンドツーエンドテストソリューションを追加しますか? デフォルト値: いいえ、Cypress、Playwright
(ユニットテストとエンドツーエンドテストの両方に Cypress を追加しますか? ユニットテストとエンドツーエンドテストの両方に Cypress を追加しますか? デフォルト値: No. )
コード品質のために ESLint を追加しますか? コード品質チェックのために ESLint を追加しますか? デフォルト値: いいえ。

2.ElementPlusをインストールする

2.1 グローバルな導入

### 安装 element-plus
npm install element-plus --save
### ElementPlus 全局引入 main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

2.2 オンデマンドでの導入

#安装element-plus
npm install element-plus --save
#安装element-plus自动引入插件，这两插件的作用就是在你使用 element的某个组件的时候，不需要手动引入了，自动帮你引，很方便
npm install -D unplugin-vue-components unplugin-auto-import

vite.config.ts ファイルを構成する

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
// ------------ 需要配置elementPlus的起点 ------------
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// ------------ 需要配置elementPlus的终点 ------------
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ------------ 需要配置elementPlus的起点 ------------
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // ------------ 需要配置elementPlus的终点 ------------
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

基本的にはここで設定をすれば使えるようになります。

2.3 発生した問題

より複雑なコンポーネントを参照すると、そのコンポーネントには関数だけがあり、対応する CSS スタイルがないことがわかります。この問題が発生した場合、解決するには主に 2 つの方法があります。

最初の解決策:

これらのコンポーネントの先頭に以下のようなコードが導入されていないか確認し、導入されている場合は削除するかコメントアウトしてください。

自動的にインポートされたコンポーネントは以前にダウンロードされているため、ここで導入すると競合が発生します。

import { ElTable } from 'element-plus'

2 番目の解決策 (推奨される方法):

スタイルのないコンポーネントを導入するという問題を避けるために、elementUI のスタイルを導入するコード行を main.js に追加する必要があります。

import 'element-plus/theme-chalk/src/index.scss'

もちろん、scss を使用せずに vue3 プロジェクトを作成すると、スタイルエラーが表示されますが、この場合は scss スタイルをインストールするだけで問題が解決されます。

npm install sass sass-resources-loader sass-resources-loader --save-dev