Scp ui

Lightweight Mobile UI Components built on Vue

Version: 0.1.2 Updated: 10/09/2018

By: xb-fe License: MIT

Downloads Last 30 Days: 98

Install

npm i scp-ui
yarn add scp-ui

Repository: https://github.com/xb-fe/scp-ui

CDNs

bundle.run: https://bundle.run/scp-ui

jsDelivr: https://cdn.jsdelivr.net/npm/scp-ui

unpkg: https://unpkg.com/scp-ui

logo

Lightweight Mobile UI Components built on Vue

npm version license JS Gzip Size CSS Gzip Size

快速上手

一、安装

scp-ui依赖vue 2.5.0+,使用前确保vue已经升级到最低要求版本

NPM

npm i scp-ui -D

YARN

yarn add scp-ui

CDN

引入固定版本

<!-- 指定固定版本样式 -->
<link rel="stylesheet" href="https://unpkg.com/scp-ui@0.1.2/lib/scpui-css/src/index.css">

<!-- 指定固定版本脚本 -->
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/scp-ui@0.1.2/lib/scp-ui.min.js"></script>

引入最新版本

访问下面的文件 URL,会自动重定向至最新版本的 CDN 链接,建议使用固定版本的 CDN 链接,避免升级时受到非兼容性更新的影响。

二、全局使用

<html>
  <head>
    <!-- 引入最新版本 -->
    <link rel="stylesheet" href="https://unpkg.com/scp-ui/lib/scpui-css/src/index.css">

    <!-- 引入最新版本 -->
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="https://unpkg.com/scp-ui/lib/scp-ui.min.js"></script>
  </head>

  <body>
    <div id="view"></div>

    <script>
      Vue.use(scpui)
      //...相关代码
    </script>
  </body>

</html>

三、npm引入组件

方式一. 导入所有组件

import Vue from 'vue';
import scpui from 'scp-ui';
import 'scp-ui/lib/scpui-css/src/index.css';

Vue.use(scpui);

方式二. 按需引入

使用es6的 import 语法,配合webpack 的 tree-shaking 实现按需引入形式

import { Button } from 'scp-ui';
import 'scp-ui/lib/button/style/index.js';

四、Rem 适配

scp-ui 中的样式默认使用rem作为单位,是以 iphone 6/7/8 375宽度作为基准开发适配

浏览器支持

现代浏览器以及 Android 4.0+, iOS 6+.

链接

手机预览

可以手机扫码以下二维码访问手机端 demo:

开源协议

本项目基于 MIT 协议,请自由地享受和参与开源。

Categories: Vue js