pursuer-ui-plus

基于 Element-ui 二次封装基础组件地址，同时支持 Vue 2.x 和 Vue 3.x

介绍

基于 vue-demi + ts+ Element-plus/Element-ui 二次封装组件，实现 Vue 2.x 和 Vue 3.x 组件库兼容

npm 方式安装使用

# 安装组件库
npm i pursuer-ui-plus

# Vue 2.x 项目还需安装组合式 API
npm i @vue/composition-api

全局注册使用

// Vue 3.x 项目 在 main.js 中引入
import { createApp } from 'vue'
import PsUi from 'pursuer-ui-plus'
import 'pursuer-ui-plus/lib/style.css'

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

// Vue 2.x 项目 在 main.js 中引入
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import PsUi from 'pursuer-ui-plus'
import 'pursuer-ui-plus/lib/style.css'

Vue.use(VueCompositionAPI)
Vue.use(PsUi)

new Vue({
  render: h => h(App)
}).$mount('#app')

按需引入

// 在 Vue 文件中按需引入
import 'pursuer-ui-plus/lib/style.css'

// Vue 3.x 单文件组件写法
<script setup lang="ts">
  import { PsPlayer, PsCompatExample } from "pursuer-ui-plus"
</script>

// Vue 2.x 单文件组件写法
<script>
  import { PsPlayer, PsCompatExample } from "pursuer-ui-plus"
  
  export default {
    components: {
      PsPlayer,
      PsCompatExample
    }
  }
</script>

Volar 组件类型提示(1.1.8版本支持)

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

注意事项

• Vue 2.x 项目必须安装并使用 @vue/composition-api
• Vue 3.x 项目可直接使用组件库
• 组件库会根据项目中的 Vue 版本自动适配，不需要额外配置