更新记录

0.0.3（2023-05-26）

• 添加按钮组件（wkv-button）

0.0.2（2023-05-10）

• 解决 Vue2 Vue3 兼容问题

0.0.1（2023-05-08）

• 发版测试

平台兼容性

wk-view

惟客数据 uni-app 组件库，基于 Vue3 技术栈，兼容 Vue2。

通过 uni_modules 安装

在 插件详情页 点击【使用 HBuilderX 导入插件】即可安装。

至此 Vue3 项目就可以使用 wk-view 了，如果使用的是 Vue2，那么需要进行 Composition Api 和 <script setup> 语法的适配。

[查看 Vue2 适配方法](#Vue2 适配)

通过 npm 安装

在 vue-cli 项目中可以使用 npm 安装 wk-view 库。

安装 wk-view

npm i wk-view

pnpm i wk-view

yarn add wk-view

配置 easycom

wk-view 不支持使用 Vue.use() 的方式安装，如果自己引用组件，可能会出现组件找不到的问题，推荐使用 easycom。

打开项目根目录下的 pages.json 并添加 easycom 节点：

{
    "easycom": {
        "autoscan": true,
        "custom": {
            "^wkv-(.*)": "wk-view/lib/wkv-$1/wkv-$1.vue"
        }
    },
    ...
}

安装 sass

vue-cli 项目需安装 sass 及 sass-loader，如在 HBuliderX 中使用，可跳过此步骤。

npm i sass sass-loader@10.1.1 -D

pnpm i sass sass-loader@10.1.1 -D

yarn add sass sass-loader@10.1.1 -D

如果 node 版本小于 16，sass-loader 请使用低于 @11.0.0 的版本，sass-loader@11.0.0 不支持 vue@2.6.12。
如果 node 版本大于 16，sass-loader 建议使用 v8.x 版本。

至此 Vue3 项目就可以使用 wk-view 了，如果使用的是 Vue2，那么需要进行 Composition Api 和 <script setup> 语法的适配。

[查看 Vue2 适配方法](#Vue2 适配)

Vue2 适配

vue.config.js 配置

使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件，导致条件编译失效，需要通过配置 vue.config.js 解决。

在根目录创建 vue.config.js 文件，并添加如下配置，如果是 Vue3 + Vite, 则无需添加。

module.exports = {
   transpileDependencies: ['wk-view']
}

安装 @vue/composition-api

npm i @vue/composition-api

pnpm i @vue/composition-api

yarn add @vue/composition-api

// main.js
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

安装 unplugin-vue2-script-setup

npm i unplugin-vue2-script-setup -D

pnpm i unplugin-vue2-script-setup -D

yarn add unplugin-vue2-script-setup -D

// vue.config.js
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default

module.exports = {
    ...,
    configureWebpack: (config) => {
        config.plugins.push(ScriptSetup({}))
    },
}

全局样式

导入 wk-view 样式并覆盖相关 scss 变量即可。

// @import '@/node_modules/wk-view/lib/wkv-scss/variables.scss';
@import '@/uni_modules/wk-view/components/wkv-scss/variables.scss';

$wkv-primary: #ff0000;