sx-sui-design
v1.3.12
Published
SX UI Components
Downloads
31
Readme
SX-SUI-DESIGN 使用手册 demo
快速上手
1. NPM 安装
$ npm install sx-sui-design --save
2. 引入 SX-SUI-DESIGN
全局引入:
一般在 webpack 入口 main.js
中如下配置:
import Vue from 'vue'
import App from './App.vue'
// 添加样式
import 'sx-sui-design/lib/sui.css'
// 导入 sx-sui-design
import SUI from 'sx-sui-design'
// 注册
Vue.use(SUI)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
按需引入:
借助插件 babel-plugin-import可以实现按需加载组件,减少文件体积
npm install
并配置.babelrc
文件
// shell
$ npm install babel-plugin-import --save-dev
// .babelrc
"plugins": [["import", {
"libraryName": "sx-sui-design",
"libraryDirectory": "src/components"
}, "sx-sui-design"]]
- 使用
ES6 Module
按需引入组件
import { button } from 'sx-sui-design'
Vue.component('sxButton', button)
特别提醒
- 不要在项目中同时 全部引入 和 按需引入 (存在冲突)
- 全局引入和按需引用都必须导入样式,即在 main.js 或根组件执行
import 'sx-sui-design/lib/sui.css'
- 由于封装库强依赖: iView Element-Ui Moment 请确保项目中引入对应库