wenjuan-ui v1.0.7

wenjuan-ui 组件库

快速开始

安装 wenjuan-ui

yarn add wenjuan-ui

安装依赖

由于wenjuan-ui是基于element-ui和antd-design-vue的二次封装，所以需要安装这两个库作为依赖

yarn add element-ui

yarn add antd-design-vue

全局引入

//main.js
import Vue from "vue";
import App from "./App.vue";
import wenjuan from "wenjuan-ui";
import "element-ui/lib/theme-chalk/index.css";
import "ant-design-vue/dist/antd.css";

Vue.use(wenjuan);

Vue.config.productionTip = false;

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

局部引入

• 使用import直接从wenjuan-ui导入，然后在components选项中注册，不需要使用Vue.use()。
• 导入复合组件时需要把子组件也导入进来，如WJDropdown

//App.vue
import { WJButton } from "wenjuan-ui";
import { WJCascader } from "wenjuan-ui";
import { WJCheckbox } from "wenjuan-ui";
import { WJDateRangePicker } from "wenjuan-ui";
import { WJDialog } from "wenjuan-ui";
import { WJDropdown, WJDropdownMenu, WJDropdownItem } from "wenjuan-ui";
import { WJDatePicker } from "wenjuan-ui";
import { DropdownSpecial } from "wenjuan-ui";
import { WJInput } from "wenjuan-ui";
import { WJInputNumber } from "wenjuan-ui";
export default {
	name: "App",
	components: {
		WJButton,
		WJCascader,
		WJCheckbox,
		WJDateRangePicker,
		WJDialog,
		WJDropdown,
		WJDropdownMenu,
		WJDropdownItem,
		WJDatePicker,
		DropdownSpecial,
		WJInput,
		WJInputNumber,
	},
	data() {
		return {
			dialogVisible: false,
		};
	},
};

如何封装新的组件

示例代码：

import { Button } from "element-ui";
import "./index.scss";

const WJButton = Button;

WJButton.name = "WJButton";

WJButton.install = (Vue) => {
	Vue.component(WJButton.name, WJButton);
};

export { WJButton };

如何更新 npm 库

首先发布更新到 npm，注意 package.json 中的版本号要做出相应的更改，不然会发布失败。
关于 npm 发布相关

在项目中更新 wenjuan-ui，使用如下命令：

yarn upgrade wenjuan-ui

兼容当前 Vue.use 的用法

保留了之前的写法，与现在的 wenjuan-fe 的写法兼容，除了引入路径外无需任何修改。 示例代码:

import { Button } from "element-ui";
import "./index.scss";

const WJButton = Button;

WJButton.name = "WJButton";

WJButton.install = (Vue) => {
	Vue.component(WJButton.name, WJButton);
};

export { WJButton };

export default {
	install: (Vue) => {
		const WJButton = Vue.extend(Button);
		Vue.component("WJButton", WJButton);
	},
};