skmobile-ui v0.0.5

快速上手

本节将介绍如何在项目中使用 SKMOBILE UI。

CDN

目前可以通过 xxx/skmobile-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

全局组件使用

<!-- 引入样式 -->
<link rel="stylesheet" href="https://xxx/skmobile-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://xxx/skmobile-ui/lib/skmobile-ui.umd.min.js"></script>

单个组件按需使用

<!-- 引入button样式 -->
<link rel="stylesheet" href="https://xxx/skmobile-ui/lib/theme-chalk/button.css">
<!-- 引入button组件 -->
<script src="https://xxx/skmobile-ui/lib/button.js"></script>

使用 vue-cli@3

npm install skmobile-ui --save
or
yarn add skmobile-ui -S

全局组件使用

首先，引入整个组件库

import SkmobileUI from 'skmobile-ui';

其次，引入组件库样式

import 'skmobile-ui/lib/theme-chalk/index.css';

最后，全局使用组件库

Vue.use(SkmobileUI);

单个组件按需使用

可以局部注册所需的组件，适用于与其他框架组合使用的场景

首先，安装 babel-plugin-component

npm install babel-plugin-component -D
or
yarn add babel-plugin-component -D

然后，修改 babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['component', {
      'libraryName': 'skmobile-ui',
      'styleLibraryName': 'theme-chalk'
    }]
  ]
}

接下来，在 main.js 中按需引用

import { Button } from 'skmobile-ui';
Vue.use(Button);

最后，在页面上用 <sk-button></sk-button> 自定义标签的方式使用组件

<template>
  <div>
    <sk-button>这是一个按钮</sk-button>
  </div>
</template>