フロントエンド初心者のための Vue3+Vite+Ts+Pinia+Sass プロジェクトガイドの一連の記事 - 第 5 章 コンポーネント ライブラリのインストールと使用 (Element-Plus 基本構成)

プログラミング 2023-12-17 00:15:26 訪問数: null

一連の記事の目次 (クリックして表示)

記事ディレクトリ

序文

公式ウェブサイトで紹介されているように、開発にはコンポーネント ライブラリを 次の利点があります:Element-Plusします。使用Element-Plus

  • 一貫性

    • 現実生活との一貫性: 現実生活のプロセスとロジックと一貫性があり、ユーザーが慣れ親しんだ言語と概念に従います。

    • インターフェイスの一貫性: デザイン スタイル、アイコンとテキスト、要素の位置など、すべての要素と構造が一貫している必要があります。

  • フィードバック フィードバック

    • フィードバックの制御: ユーザーがインターフェイス スタイルとインタラクティブな効果を通じて操作を明確に認識できるようにします。

    • ページのフィードバック: 操作後、ページ要素の変化を通じて現在のステータスが明確に表示されます。

  • 効率

    • プロセスの簡素化: シンプルで直感的な操作プロセスを設計します。

    • 明確で曖昧さがない: 言語が明確に表現され、意味が明確であるため、ユーザーはすぐに理解して意思決定を行うことができます。

    • ユーザーが識別できるようにする: インターフェイスはシンプルでわかりやすいため、ユーザーは思い出すのではなくすぐに識別できるため、ユーザーの記憶負担が軽減されます。

  • コントロール性

    • ユーザーの意思決定: シナリオに応じてユーザーの操作に関する提案や安全に関するヒントを提供できますが、ユーザーに代わって意思決定を行うことはできません。

    • 制御可能な結果: ユーザーは、現在の操作の取り消し、ロールバック、終了などの操作を自由に実行できます。

1. インストール

ここに画像の説明を挿入します
プロジェクトのルート ディレクトリで新しいターミナルを開き、yarn またはその他のツールを使用して依存関係をインストールします。

公式ウェブサイトのコード:

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

ここに画像の説明を挿入します

2. クイックスタート

システム内のすべての js ファイルを ディレクトリ内の ts ファイルに変更しますファイル内scrmain.ts

import {
    
     createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3. 自動導入

1. まず、2 つのプラグイン unplugin-vue-components と unplugin-auto-import をインストールする必要があります。

npm install -D unplugin-vue-components unplugin-auto-import

2. 次のコードを vite.config.ts ファイル に追加します。

import {
    
     defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    
     ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
    
    
  // ...
  plugins: [
    // ...
    AutoImport({
    
    
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    
    
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

4. vite とプラグインを自分で設定する

1. インストールplugins

yarn add vite-plugin-svg-icons
yarn add vite-plugin-vue-setup-extend
yarn add vite-plugin-html
yarn add vite-plugin-top-level-await

ここに画像の説明を挿入します
ここに画像の説明を挿入します
ここに画像の説明を挿入します
ここに画像の説明を挿入します

2、添加 vite.plugins.ts 文件

import path from 'path'
import vue from '@vitejs/plugin-vue'
import {
    
     createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import setupExtend from 'vite-plugin-vue-setup-extend'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import {
    
     ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {
    
     createHtmlPlugin } from 'vite-plugin-html'
import topLevelAwait from 'vite-plugin-top-level-await'

export default function createVitePlugins(viteEnv, isBuild = false) {
    
    
  const {
    
     VITE_GLOB_APP_TITLE } = viteEnv
  const vitePlugins = [
    vue(),
    setupExtend(),
    createSvgIconsPlugin({
    
    
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    }),
    Components({
    
    
      resolvers: [ElementPlusResolver()]
    }),
    AutoImport({
    
    
      // resolvers: [ElementPlusResolver()],
      // targets to transform
      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
      // global imports to register
      imports: [
        // 插件预设支持导入的api
        'vue',
        'vue-router',
        'pinia'
        // 自定义导入的api
      ],

      // Generate corresponding .eslintrc-auto-import.json file.
      // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
      eslintrc: {
    
    
        enabled: false, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      },

      // Filepath to generate corresponding .d.ts file.
      // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
      // Set `false` to disable.
      dts: './auto-imports.d.ts',

    }),
    createHtmlPlugin({
    
    
      minify: isBuild,
      inject: {
    
    
        data: {
    
    
          title: VITE_GLOB_APP_TITLE
        }
      }
    }),
    topLevelAwait({
    
    
      // The export name of top-level await promise for each chunk module
      promiseExportName: '__tla',
      // The function to generate import names of top-level await promise in each chunk module
      promiseImportName: i => `__tla_${
     
     i}`
    })
  ]
  return vitePlugins
};

3、修改 vite.config.ts 文件

import path from 'path'
import {
    
     defineConfig, loadEnv } from 'vite'
import createVitePlugins from './vite.plugins'

const base_url = 'xxx'

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    
    
    plugins: createVitePlugins(env, command === 'build'),
    base: './',

    resolve: {
    
    
      alias: {
    
    
        '@': path.resolve(__dirname, 'src')
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    server: {
    
    
      host: "0.0.0.0",
      proxy: {
    
    
        '/xxx': {
    
    
          target: base_url,
          changeOrigin: true,
        }
      }
    }
  }
})

5. テストコンポーネント

1. 不要なファイルを削除する

コンポーネントが利用可能かどうかをテストする前に、いくつかの不要なファイルを削除して、ディレクトリ ファイルが純粋であることを確認します。

  • 删除 src/components/HHelloWorld.vue 文件
  • 削除 App.vue ファイルの内容を次のものに置き換えます
<template>
  <div>

  </div>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

2. 利用可能かどうかをテストする

App.vue で、コンポーネント ライブラリ コードを入力し、ページをチェックして成功したかどうかを確認します。

<template>
  <div>
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

ここに画像の説明を挿入します

要約する

この記事では、Element-Plus コンポーネント ライブラリを使用して開発するためのインストールとクイック スタートのプロセスを紹介します。この記事では、まず、一貫性、フィードバック、効率性、制御性など、 Element-Plus コンポーネント ライブラリの利点を紹介します。次に、 Element-Plus をインストールする手順と、コードでのクイック スタート ガイドについて詳しく説明します。続いて、 自動導入とカスタム設定Vite、プラグインについて詳しく説明しました。最後に、コンポーネントの可用性をテストする前に、プロジェクトの純粋性を確保するためにいくつかのファイルが削除され、サンプル コードを通じてコン​​ポーネント ライブラリの使用が実証されました。上記の構成コードは、github ウェアハウス 直接copy、ウェアハウス パス:https://github.com/SmallTeddy/music-explorer-web。

おすすめ

転載: blog.csdn.net/SmallTeddy/article/details/134507363
おすすめ
openKylinコミュニティ生態委員会の第6回会議が無事に開催されました
Alibaba Cloud、Tongyi Qianwen 2.5を正式リリース
Python 3.13 が最初のベータ版をリリース: 実験的なフリー スレッド モードと JIT、改善された対話型インタープリター
Stack Overflow は私のコードを使用して大規模な AI モデルをトレーニングし、私のアカウントを禁止しました。
Pop!_OS の COSMIC デスクトップが App Store のリストに掲載される
レポート: Django は依然として 74% の開発者にとって第一の選択肢です
「2024年第1四半期のインターネット投融資業務」調査レポート
15 年前、彼は「FFmpeg 恥の柱」に立っていたのに、今でも私たちに感謝しなければなりません - Tencent QQPlayer はその恥を晴らしますか?
ランキング
ブルーブリッジカップクロップハイブリッド（再帰的）
java线程、线程池
关于毕业前后的道路
JVMの基本
OpenCV ヒストグラムの原理と表示、マスキング、イコライゼーション、適応イコライゼーション
PHPのAES暗号化と復号化、MCRYPT_ENCRYPTとopenssl_encrypt
スコアボードを回転poj3335
Vueで要求されたデータ：タイムスタンプ変換時間
Javaの合併のpng画像
HttpServletResponseアプリケーションリクエストのリダイレクト
アーカイブ
もっと
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)

コードワールド

© 2018 codetd.com