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现有组件库不合
• 因此选择保留源码, 二次封装