Softcan ui

SoftCan 移动UI框架

Version: 3.1.1 Updated: 02/11/2018

By: gohero License: MIT

Downloads Last 30 Days: 147

Install

npm i softcan-ui
yarn add softcan-ui

CDNs

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

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

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

softcan-ui

npm package Build Status Dependencies

Overview

本文将介绍softcan-ui的安装方式和基本的使用方法。

基础技术框架

  1. Vue.js
  2. Lerna.js
  3. ECMAScript 2015
  4. Webpack
  5. ESLint

文件目录结构

softcan-ui/                        ##根目录
    build/                        ##webpack构建配置目录
    config/                        ##环境配置文件目录
    demo/                        ##demo源文件
    dist/                        ##构建后的文件
        |_ demo/                ##构建后的demo文件
        |_ softcan-ui/                    ##构建后的各个组件代码
    node_modules/                ##第三方依赖包
    packages/                    ##lerna拆分的组件包源文件
    src/                        ##其他基础公共源文件
    static/                        ##静态资源文件(图片图标等)
        |_ demo/                ##demo的静态资源文件
        |_ softcan-ui/                    ##softcan-ui组件的静态资源文件
    test/                        ##测试代码源文件
    .babelrc                    ##babel配置文件
    .editorconfig                ##编辑器配置文件
    .eslintignore                ##eslint忽略检查的文件
    .eslintrc                    ##eslint配置文件
    .gitignore                    ##git忽略文件的配置
    index.html                    ##总入口文件
    lerna.json                    ##lerna配置文件
    package.json                ##依赖包声明
    README.md                    ##read me

Getting Started

I. Install

npm安装

推荐使用npm的方式安装,它能更好地与Webpack等构建工具结合使用。

npm install softcan-ui

CDN (TODO)

可以从静态资源服务器获取最新的资源文件。

II. Start

引入Softcan UI

你可以引入整个softcan-ui组件库,或者根据需要引入部分组件。

完整引入

完整引入softcan-ui后,在以后的引用中,不需再引入组件及样式,可直接在模板中使用或调用方法 在你的工程目录入口js文件中,写入以下内容:

import Vue from 'vue'
/* 引入组件库js文件 */
import softcan from 'softcan-ui'
/* 引入组件库全部css */
import 'softcan-ui/dist/softcan-ui/index.css'

Vue.use(softcan)

new Vue({
    // vue options
})

组件中使用,如在example.vue中使用softcan-ui:

<!-- 在vue的template中直接引用即可 -->
<template>
    <div>
        <sc-button></sc-button>
        <sc-badge></sc-badge>
    </div>
</template>
按需引入

你可以只安装你需要的组件。这里以安装softcan-uibutton组件为例:

npm install softcan-ui --save

安装后在所需的.vue文件中进行声明和使用,或在入口js文件中声明:

<template>
    <div>
        <sc-button>test</sc-button>
    </div>
</template>
<script>
import Vue from 'vue'
import {Button} from 'softcan-ui'
import 'softcan-ui/dist/softcan-ui/Button/index.css'
Vue.component(Button.name,Button)
</script>

贡献组件

I. 开发

目前在package.json中声明了多个脚本模式,可以通过npm run xxx的方式进行运行,各个命令启动服务如下:

npm run dev:demo
启动demo的本地开发模式
npm run dev
启动组件库的本地开发模式
npm publish
发布更改到npm

II. 测试

npm run unit
执行单元测试
npm test
执行所有测试

III. 构建

构建demo页面:

npm run build:demo

demo构建后的文件在dist/demo目录下。

构建完整组件库代码:

npm run build

完整组件库构建后的文件在dist/softcan-ui目录下。

IV. 发布 请提交Pull Request

代码规范

请参考 ESLint standard 规范进行书写,并执行npm run lint进行代码检查。

Tips

如果你使用的是Webstorm,请在运行npm install之前,在Preferences | Editor | File Types | Ignore files and folders中增加node_modules,避免循环依赖造成的死循环。

Categories: Vue js