1.0.7 • Published 12 months ago
wen-vue-ui v1.0.7
wsm-vue-ui
一、插件描述
- 组件是基于element-ui进行的二次封装。
二、本插件的包依赖
"vue": "^2.6.11",
"element-ui": "^2.13.2",
"core-js": "^3.6.5",
"axios": "^0.19.2",
"qs": "^6.9.4",
"dayjs": "^1.8.27",
"loadsh": "^0.0.4",
五、安装使用该组件
npm install wsm-vue-ui -S
1.快速上手
本节将介绍如何在项目中使用 wsm-el-ui
你可以引入整个 wsm-el-ui,或是根据需要仅引入部分组件。我们先介绍如何引入完整的jdf-el-ui。
2.完整引入
在 main.js 中写入以下内容:
import Vue from 'vue';
import Element from 'wsm-el-ui';
import 'wsm-el-ui/lib/theme/index.min.css';
import App from './App.vue';
Vue.use(Element);
new Vue({
el: '#app',
render: h => h(App)
});
以上代码便完成了 wsm-el-ui 的引入。需要注意的是,样式文件需要单独引入。
3.按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc 修改为:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "wsm-el-ui",
"styleLibraryName": "theme"
}
]
]
}
new Vue({ el: '#app', render: h => h(App) });
完整组件列表和引入方式
```javascript
import Vue from 'vue';
import {
Table
} from 'wsm-el-ui';
Vue.use(Table);