ff-ui-plus

FF-ui-Plus

介绍

基于 vue3+ ts+ Element-plus 二次封装组件

这是我在学习 Vue3 中基于Element-plus 二次封装基础组件文档，希望对你有用。可查看 详细组件案例文档 预览

安装

建议您使用包管理器 (pnpm ， yarn，npm) 安装 ff-ui-plus。

// 使用pnpm
pnpm install ff-ui-plus -S

// 使用npm
npm install ff-ui-plus -S

// 使用yarn
yarn add ff-ui-plus

全局注册使用

前提条件：使用项目必须全局注册 Element-plus 组件库

// 在main.js中按下引入
import { createApp } from "vue"
import App from "./App.vue"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
import "element-plus/theme-chalk/dark/css-vars.css"
// import en from 'element-plus/es/locale/lang/en' // 引入element-plus语言包 en--不建议固定设置
import zhCn from "element-plus/es/locale/lang/zh-cn" // 引入element-plus语言包 zh-cn--不建议固定设置
import plusZhCn from "ff-ui-plus/locale/zh-cn" // 引入ff-ui-plus语言包 zh-cn--不建议固定设置
// import plusEn from 'ff-ui-plus/locale/en' // 引入ff-ui-plus语言包 en--不建议固定设置
// element-plus图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
import TuiPlus from "ff-ui-plus"
import "ff-ui-plus/index.css"
const app = createApp(App)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 注册ElementPlus
app.use(ElementPlus, {
  locale: { ...zhCn, ...plusZhCn } // 语言设置--不建议固定设置
  // size: Cookies.get('size') || 'medium' // 尺寸设置
})
app.use(TuiPlus)
app.mount("#app")

按需引入

// 在main.js中按下引入
import "ff-ui-plus/index.css"
// 单个.vue文件引入
;<script setup lang="ts">
  import {(TDetail, TForm)} from "ff-ui-plus"
</script>

国际化配置-- ConfigProvider

<template>
  <el-config-provider :locale="locale"> *** </el-config-provider>
</template>

<script setup>
  import { ElConfigProvider } from "element-plus"
  import { useGlobalStore } from "@/store/modules/global" // 引入pinia全局状态管理
  import en from "element-plus/es/locale/lang/en"
  import zhCn from "element-plus/es/locale/lang/zh-cn"
  import plusZhCn from "ff-ui-plus/locale/zh-cn"
  import plusEn from "ff-ui-plus/locale/en"

  const zhCnLocales = {
    ...zhCn,
    ...plusZhCn
  }
  const enLocales = {
    ...en,
    ...plusEn
  }

  const globalStore = useGlobalStore()
  const locale = computed(() => (globalStore.language === "zh" ? zhCnLocales : enLocales))
</script>

浏览器直接引入

直接通过浏览器的 HTML 标签导入 ff-ui-plus，然后就可以使用全局变量 TuiPlus 了。

根据不同的 CDN 提供商有不同的引入方式， 我们在这里以unpkg 和 jsDelivr 举例。 你也可以使用其它的 CDN 供应商。

unpkg

<head>
  <!-- 导入element-plus样式 -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- 导入vue3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- 导入element-plus -->
  <script src="//unpkg.com/element-plus"></script>

  <!-- 导入ff-ui-plus样式 -->
  <link rel="stylesheet" href="//unpkg.com/ff-ui-plus/index.css" />
  <!--导入ff-ui-plus"  -->
  <script src="//unpkg.com/ff-ui-plus"></script>
</head>

jsDelivr

<head>
  <!-- 导入element-plus样式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
  <!-- 导入vue3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- 导入element-plus -->
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>

  <!-- 导入ff-ui-plus样式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/ff-ui-plus/index.css" />
  <!--导入ff-ui-plus"  -->
  <script src="//cdn.jsdelivr.net/npm/ff-ui-plus"></script>
</head>

全部组件如下

Vue - Official （Volar）待验证

// 需要在使用的项目的tsconfig.json文件中添加以下
compilerOptions：{
  "types": [
      "ff-ui-plus/index.d.ts"
    ],
}

自动按需导入 (暂不支持--待完善)

• 1. 安装插件

  pnpm install -D unplugin-vue-components unplugin-auto-import @ff-ui-plus/resolver
  
  

• 2. 配置 vite.config.ts 或者配置 webpack(vue).config.js

vite.config.ts 配置

// 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"
import { TuiPlusResolver } from "@ff-ui-plus/resolver"

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

vue.config.js 配置

const { defineConfig } = require("@vue/cli-service")
const AutoImport = require("unplugin-auto-import/webpack")
const Components = require("unplugin-vue-components/webpack")
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers")
const { TuiPlusResolver } = require("@ff-ui-plus/resolver")

module.exports = defineConfig({
  // ...
  configureWebpack: {
    plugins: [
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [TuiPlusResolver(), ElementPlusResolver()]
      })
    ]
  }
})

安装依赖

注意: 本地环境版本最好安装 Node.js 18.x+、pnpm 7.x+

npm install -g pnpm

# 安装依赖
pnpm install --registry=https://registry.npmjs.org/
>pnpm config get registry 查看当前指向源

# 如果安装依赖失败，可以尝试使用淘宝镜像  --registry=https://registry.npmmirror.com/
>pnpm config set registry https://registry.npmmirror.com/ 切换淘宝镜像源
>pnpm install

本地运行 vitepress 中组件文档

// docs项目(文档demo示例)基于vue3+vite项目
npm run docs:dev