xm-cli

xm rebuild CLI for dva .

Getting Started

Install, create and start.

# Install
$ npm install -g git://git.coding.net/canisminor1990/xm-cli.git

# Create app
$ xm new myapp

# Start app
$ cd myapp
$ yarn start

Commands

xm-cli have 3 commands: new, init and generate(alias g).

xm new [options]

Create app with new directory.

Usage Examples

$ xm new myapp
$ xm new myapp --demo
$ xm new myapp --no-install

options

• --no-install -- Disable yarn install after files created

xm init [options]

Create app in current directory. It's options is the same as xm new.

xm generate (short-cut alias: "g")

Generate route, model and component.

Usage Examples

$ xm g route Example      # alias: xm g r
$ xm g model Example      # alias: xm g m
$ xm g component Example  # alias: xm g c
$ xm g layout Example     # alias: xm g l

Generated File Tree

├── src                    # Source directory
    ├── assets             # Store images, icons, ...
    ├── components         # UI components
        ├── Example        # Components Name
            ├── index.js   # 
            └── index.css  # 
        └── index.js       # Components pack
    ├── layouts            # Layout components
        ├── Example        # Layout Name
            ├── index.js   # 
            └── index.css  # 
        └── index.js       # Layout Pack
    ├── router             # Router components
        ├── router         # Router Name
            ├── index.js   # 
            └── index.css  # 
    ├── router.js          # Router configuration
    ├── index.js           # Enry file
    ├── index.css          # 
    ├── index.html         # 
    ├── models             # Dva models
    ├── services           # Used for communicate with server
    └── utils              # Utils
        └── request.js     # A util wrapped dva/fetch
├── .editorconfig          #
├── .eslintrc              # Eslint config
├── .stylelintrc           # Stylelint config
├── .gitignore             #
├── .roadhogrc.js          # Roadhog config
└── package.json           #

Configuration

xm-cli use roadhog for build and server, view roadhog#Configuration (中文版) for details.

Changelog

xm-cli 对比 dva-cli 增加了几个概念:

组件库概念

dva-cli 中实现了添加一个路由 routerComponents 可以自动注册到 router.js 由此延伸在 xm-cli 中:

$ xm g c Test # 生成一个Test组件

• 这个组件会自动注册到 components/index.js 中
• 然后调用只需要 import { Test,Button,Header,... } from '../components'

Layout概念

此概念源于swig等模板引擎

$ xm g l Test # 生成一个Test布局
# 这个布局也会自动注册到 `layouts/index.js` 中

• Layout 为 Component 和 RouterComponent 的中间层
• Layout 由多个页面常用 Component 组成, 相当于一个页面布局模板,

虽然此概念可以被 Component , RouterComponent 任一实现, 但单独抽离出来感觉逻辑比较清晰(待验证)

PostCSS

• PostCSS 编译速度和扩展能力大大超越SCSS
• 通过一个 precss 插件就能完全兼容和编译SCSS语法

$ gulp      # 可实现: 实时自动Lint, 修正和键值排序

样式隔离

• 生成页面时候会自动生成该页面唯一的父级Class
• 如组件 Test 中会生成 xm-component-test
• 在父级Class中的改动不会影响全局样式

TODO

XMUI组件库对阿里Antd组件库的二次封装

• 放弃修改源码的方案,因为发现阿里组件库更新速度非常快
• 而且阿里的组件库基于less和xmui现有组件库不合
• 因此选择保留源码, 二次封装