1.0.5 • Published 2 years ago
ollie-ui v1.0.5
ollie-ui
组件库还在搭建中,暂时还不能投入使用!!!
ollie-ui 是一个 Vue 移动端 UI 组件库,适合在 vue2.X 技术栈项目中使用。
- 提供 20+ 高质量组件,覆盖移动端各类场景
- 灵活扩展,丰富的属性配置
- 高性能
- 完善的文档和示例
- 支持按需加载
- 移动端适配
组件
安装
npm i ollie-ui
完整引入
import Vue from 'vue';
import App from './App.vue';
import OllieUI from 'ollie-ui';
Vue.use(OllieUI);
import 'ollie-ui/lib/theme-chalk/index.css';
new Vue({
render: h => h(App)
}).$mount('#app');
按需引入
按需引入方式一:babel-plugin-component
# 安装插件
npm i babel-plugin-component -D
// 可以在 babel.config.js 中配置
{
"plugins": [
[
"component",
{
"libraryName": "ollie-ui",
"style": false
}
]
]
}
按需引入方式二:babel-plugin-import
# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "ollie-ui",
"libraryDirectory": "lib",
"style": false
}]
]
}
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'ollie-ui',
libraryDirectory: 'lib',
style: false
}, 'ollie-ui']
]
};
引入所需组件
接下来,如果你只希望引入部分组件,比如 Button 和 Tag,那么需要在 main.js 中写入以下内容:
import Vue from 'vue';
import App from './App.vue';
import { Button, Tag } from 'ollie-ui';
Vue.use(Button);
Vue.use(Tag);
new Vue({
render: h => h(App)
}).$mount('#app');
或者你只想在某个页面单独引入:
<template>
<div>
<ol-button></ol-button>
</div>
</template>
<script>
import { Button } from 'ollie-ui';
export default {
components: {
'ol-button': Button
}
};
</script>