sfmui

SFMUI

基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于丰声微服务等移动端页面

链接

• 文档
• 例子
• 教程: 用 vue-cli 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)

讨论

使用上遇到的问题请联系顺丰科技企业内部系统研发中心综合行政管理系统研发部。

特性

- 基于webpack+vue-loader+smui可以快速开发移动端页面
- 安装命令行工具(vue-cli)快速搭建项目且无需重复安装依赖，基于 webpack 2
- 兼容 webpack 1 和 2，只需同一套配置
- 生成的配置完全兼容 webpack 的命令行工具

安装

运行环境

• Node.js 4+
• npm 3+
• Python 2.7.x

使用 vue-cli 命令行工具

npm i vue-cli -g

Step 1. 创建一个 vue 项目 （将自动下载 vue 项目脚手架，只需下载一次）

$ vue init webpack my-project
$ cd my-project

Step 2. 开始开发

$ npm run dev

Step 3. 本地打包

$ npm run build

运行文档库

$ npm run dev 或者 npm run doc

Step 1. 在src/components目录新增组件 Step 2. 更改根目录components.json组件列表文件

运行组件demo

Step 1. 启动demo

$ npm run demo

Step 2. 访问demo页面

http://localhost:9001/smui-demoindex.html

Step 3. 打包demo

$ npm run buildDemo

发布smui node依赖包

Step 1. 执行package命令

$ npm run package

smui目录结构说明

    smui/
    |-- build               webpack打包配置文件
    |-- config	            基础配置及环境变量
    |-- docs 	            组件文档库目录
    |-- example             组件DEMO及业务组件开发目录
        |-- comm            存放DEMO公共的插件、图片、字体等
        |-- smui-demo       SMUI移动端DEMO开发目录
    `-- src                 存放文档
        |-- components      业务组件
        |-- directives      全局指令
        |-- mixins          混合机制，组件复用设计
        |-- styles          组件的样式库，基于weui扩展
        |-- utils           工具类