2.1.11 • Published 5 years ago
ivuel v2.1.11
ivuel
大部分组件修改自iview&&elementUI
NPM 安装
推荐使用 npm 来安装
$ npm install ivuel --save
引入 ivuel
一般在 webpack 入口页面 main.js 中如下配置:
import Vue from 'vue';
import ivuel from 'ivuel';
import 'ivuel/dist/styles/ivuel.css';
Vue.use(ivuel);
按需引用
npm install babel-plugin-import-ivuel --save-dev
.babelrc
配置
{
"plugins": [["import-ivuel", {
"libraryName": "ivuel",
"libraryDirectory": "src/components"
}]]
}
或者(按需引进包括样式)
{
"plugins": [["import-ivuel", {
"libraryName": "ivuel",
"libraryDirectory": "src/components",
"style":"ivuel"
}]]
}
然后这样按需引入组件,就可以减小体积了:
import { Button, Table } from 'ivuel';
Vue.component('Button', Button);
Vue.component('Table', Table);
特殊组件引进
import { Poptip,Tooltip,Message,Modal,Spin,Notice,LoadingBar } from 'ivuel';
;
Vue.directive('poptip', Poptip.directive);
Vue.directive('tooltip', Tooltip.directive);
Vue.component('Tooltip', Tooltip);
Vue.component('Poptip', Poptip)
Vue.component('Modal', Modal);
Vue.component('Spin', Spin);
Vue.component('Notice', Notice);
Vue.component('LoadingBar', LoadingBar);
Vue.component('Message', Message);
Vue.prototype.$Loading = LoadingBar;
Vue.prototype.$Message = Message;
Vue.prototype.$Modal = Modal;
Vue.prototype.$Notice = Notice;
Vue.prototype.$Spin = Spin;
特别提醒
- 前一种按需引用仍然需要导入样式,即在 main.js 或根组件执行 import 'ivuel/dist/styles/ivuel.css';
按需引进样式的话,通过
less-loader
的modifyVars
配置皮肤//package.json { "name": "vue-project", "version": "1.0.0", ... "theme":{//此处修改样式变量 "@primary-color":"red" } }
//vue-cli /build/utils.js const packageConfig = require('../package.json') return { css : generateLoaders(), postcss : generateLoaders(), less : generateLoaders('less',{"modifyVars":packageConfig.theme}),//修改此行 sass : generateLoaders('sass', { indentedSyntax: true }), scss : generateLoaders('sass'), stylus : generateLoaders('stylus'), styl : generateLoaders('stylus') }
## 配置`ivuel-loader`
### 下载
```bash
npm i ivuel-loader -D
配置
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {}
},
{
loader: 'ivuel-loader',
options: {
prefix: false
}
}
]
}
]
}
2.1.11
5 years ago
2.1.10
5 years ago
2.1.9
5 years ago
2.1.7
5 years ago
2.1.6
5 years ago
2.1.5
5 years ago
2.1.4
5 years ago
2.1.3
5 years ago
2.1.2
5 years ago
2.1.1
5 years ago
2.1.0
5 years ago
2.0.20
6 years ago
2.0.19
6 years ago
2.0.18
6 years ago
2.0.17
6 years ago
2.0.16
6 years ago
2.0.15
6 years ago
2.0.14
6 years ago
2.0.13
6 years ago
2.0.12
6 years ago
2.0.11
6 years ago
2.0.10
6 years ago
2.0.9
6 years ago
2.0.8
6 years ago
2.0.7
6 years ago
2.0.6
6 years ago
2.0.4
6 years ago
2.0.3
6 years ago
2.0.2
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.2.5
6 years ago
1.2.4
6 years ago
1.2.3
6 years ago
1.2.2
6 years ago
1.2.1
6 years ago
1.2.0
6 years ago
1.1.6
6 years ago
1.1.5
6 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago