vivo-ui
vivo-ui使用说明:
1、安装
npm install @vivo/vivo-ui
或
yarn add @vivo/vivo-ui
2、使用
全局组件的注册使用:
在入口文件处(main.js)中:
import { ToastPlugin } from '@vivo/vivo-ui'
使用:
Vue.$vivo.toast.show({
type: 'text',
text: content,
position: 'bottom',
time: 2000
})
可以根据自己项目结构进行封装,是在全局使用toast时更加方便。
局部组件的注册使用:
在需要引用文件中:
import { XTextarea } from '@vivo/vivo-ui'
export default {
components: {
XTextarea
}
}
<template>
<x-textarea title="title" v-model="value"></x-textarea>
</template>
3、按需加载
方案一:
通过webpack4中package.json的sideEffects属性,如果你的项目使用的是webpack4,则可以直接打包,vivo-ui已经直接可以提供按需加载的能力。
方案二:
如果你的项目使用的是webpack4以下:通过babel-plugin-import依赖组件:
npm i babel-plugin-import --save-dev
在bable.config中配置如下:
module.exports = {
presets: [
'@vue/app'
...
],
plugins: [
[
'import',
require('@vivo/vivo-ui/babel.import')
]
]
}
plugin引入vivo-ui的babel.import.js,随后打包即可做到按需加载。