apollo-cli

apollo-cli(命令行工具),提供根据模板新建项目,生成路由,生成页面、生成 model 等功能。

快速开始

搭建前端开发环境

前端开发环境需安装 NodeJS 和 npm。

Windows 用户可以先安装 Git 客户端,MacOS 用户请忽略。

  1. 安装 NodeJS

请根据您的操作系统,下载并安装 NodeJS 版本:

安装完 NodeJS 会自带 npm,一般不需单独安装。

  1. 检查是否安装成功

在 Git Bash(Windows)或终端(MacOS)中输入以下命令:

$ node -v
v10.16.0 # 输出版本号
$ npm -v
6.9.0 # 输出版本号

输出对应版本号,代表安装成功。

着手开发

# 全局安装 apollo-cli,--registry 为 npm 私有仓库的地址
$ npm install apollo-cli -g --registry=http://xxx.x.x.x

# 创建应用
$ apollo new apolloApp --template blank

# 启动应用
$ cd apolloApp
$ npm start

项目结构

├── public                          # 无需构建的资源
├── src
│   ├── assets                      # 静态资源目录
│   ├── components                  # 通用组件
│   ├── models                      # 应用 Store 数据
│   ├── project                     # 业务逻辑组件
│   ├── router                      # 全局路由配置
│   ├── services                    # 接口数据请求
│   ├── utils                       # 其他工具方法
│   ├── index.ejs                   # 模板文件
│   └── index.js                    # 入口文件
└── webpack.config.js               # webpack 配置

支持的命令

支持 3 种命令:newinitg

apollo new [options]

创建新路径并创建应用。

使用示例

$ apollo new myapp --template mobile
$ apollo new myapp --template mobile@1.1
$ apollo new myapp --template mobile --registry=http://xxx.x.x.x

options 参数

  • --template -- 从 npm 仓库下载的初始工程模板,支持以下模板参数
    • mobile:移动端模板,包含组件库和示例页面
    • pure-mobile:移动端模板,仅包含 webpack 配置等基础支撑
    • admin:桌面端,后台管理模板,包含组件库和示例页面
    • blank:桌面端,仅包含 webpack 配置等基础支撑。
    • ie8:桌面端,自带 IE8 支持的模板。
  • --no-install -- 初始项目创建完成后,不安装依赖包
  • --registry -- npm 私有仓库地址

apollo init [options]

当前路径创建应用,options 参数同 apollo new

使用示例

$ apollo init
$ apollo init --template mobile

apollo generate (缩写为:"g")

生成路由,IE8 路由,页面,IE8 页面,model 和组件。

使用示例

$ apollo g route user-list  # 在 router.js 生成根目录 router,另外在 pages 目录下生成文件夹,文件夹里面包含 Page,View 和 less 文件
$ apollo g route-ie8 user-edit
$ apollo g page user-list  # 当前目录下生成 Page, View 和 less 文件
$ apollo g page-ie8 user-edit
$ apollo g model user # 当前目录下生成名为 user 的 model
$ apollo g component Editor
$ apollo g component Users/UserModal
$ apollo g component Header --no-css

配置

apollo-cli 使用 apollo-build 构建和运行项目,详细的文档见这里

示例 Demo

完整包含 apollo 和 apollo-build 的 Demo 见这里

Copyright © 民生科技有限公司 2019 all right reserved,powered by Gitbook联系方式: wanglihang@mskj.com
修订时间: 2019-08-02 16:19:32

results matching ""

    No results matching ""