安装及新建项目

支撑系统

  1. LINUX
  2. MAC OSX

暂不支持windows

支撑环境

$ npm install node-gyp -g
$ npm install node-pre-gyp -g

安装

$ npm install aotoo-cli -g

输入aotoo -V检查是否安装完成

新建workspace

新建workspace目录,该目录包含编译文件、环境文件及项目文件(src, dist)

# 通过命令行新建的workspace是项目开始的第一步
$ aotoo init xxx
  • jiegou
  • workspace结构说明

    • /build

      项目编译核心文件
    • /src

      项目目录
    • /aotooExtends

      aotoo扩展插件目录
    • aotoo.config.js

      aotoo-hub的配置文件
    • index.js

      启动文件

workspace是为项目准备的启动环境,我们将项目与环境切分开,为多项目开发提供了便利

新建项目

新建项目会在workspace的源目录下,新建一个关于项目的目录,包含源文件及输出文件

初始项目结构

进入workspace,创建新项目

# 第二步,新建项目
$ cd xxx
$ aotoo create newProject1
$ aotoo create newProject2
  • jiegou
  • 初始项目结构

    新建项目后,我们会在src目录下展开相关的目录结构
    • /configs

      环境配置文件目录,添加测试、生产等环境配置
    • /js

      js源文件目录
    • /js/index.js

      业务index的js文件
    • /js/vendors/index.js

      独立打包成vendors.js,并自动被页面引用

html、css、nodeserver目录会根据js的引入情况自动生成,这个另起篇章介绍

单个项目启动

# 开发编译,并启动前端
$ aotoo dev newProject1

# 如果需要node端(该命令一次生效,终生有效,且后续启动时不需要参数 `--server`)
# 开发编译,并启动Node端
$ aotoo dev newProject1 --server

# 生产编译
$ aotoo build newProject1

# 只启动node端(编译完成)
$ aotoo start newProject1

# 带环境编译或启动
$ aotoo .... --config envConfigFileName

完整的项目目录结构

初始项目是最简目录结构,一个完整的项目中,它的结构应该如下

workspace
    └── src
        └── newProject1 
                ├── component  //组件目录
                │    └── ......  
                ├── ssr/sync  // 同构模块目录
                │    └── ......  
                ├── dist      // 静态文件输出目录 
                │    └── ......  
                ├── js        // 前端业务js目录,核心源文件目录
                │    └── index.js  
                ├── css       // 前端业务css目录
                │    └── index.styl
                ├── html      // 前端业务模板目录,一般的模板都会自动生成,如需要自定义幕版,则根据同名规则自定义生成相关模板
                │    └── index.html
                └── server    // node端的源码目录
                      │── pages  // koa2的control层目录
                      │    └── index.js
                      └── plugins // 自定义插件目录,适用于node端
                          └── ......

请注意上面结构中文件名相同的文件,如index,它们都遵循同名的规则,系统会自动将它们匹配起来(css需要在js中引入才能匹配)

dist输出结构

编译后静态文件输出目录

# 启动项目 
$ aotoo dev newProject1
  • jiegou
  • dist输出结构

    编译后,在项目目录下会多出来一个dist的目录,所有静态资源经过webpack编译后会在此输出,并带有响应的版本号
    • /1.0.3

      版本目录,根据aotoo.config中的版本信息
    • /dev

      该项目处于开发模式,生产模式使用/pro目录
    • /html

      html模板编译输出目录
    • /js/vendors.js

      该文件根据/src/js/vendors目录中的文件生成
    • mapfile.json

      静态资源的映射文件,主要用于node端对静态资源的精确寻址

我们看到html目录,在src目录中并没有html的目录. aotoo-hub默认会为src/js/*.js(!vendors)自动生成 与之名字相对应的html模板。CSS目录以及相应的样式的自动生成则需要在src/js/*.js中手动import引入(只支持stylus)

server结构

当项目需要独立的Node服务支撑时

# 带server,启动项目
# 该参数生效后,则项目后续渲染由webpack-dev-server移交给node端来完成
# webpack-dev-server在这里只作为桥接模式  

$ aotoo dev newProject1 --server
  • jiegou
  • server结构

    koa2作为node端的核心MVC框架
    • server/pages

      pages下存放的是所有control部分的文件
    • server/pages/index.js

      作为域名首页的control模块,当访问http://www.abc.com/index时响应
      注意这里的文件名与src/js/index.js同名
    • server/index.js & server/lib.js

      node-server的启动文件,如需额外指定KOA中间件,可以编辑lib.js
    • server/config.js

      node-server的启动环境变量

hub架构默认提供node service服务是基于aotoo-koa-server库实现的,继承自KOA2,与aotoo能有机融合,支持灵活的插件机制。node service服务是开放性和开源的,即你可以替换为其他NEXT, NUXT, EGG等或继续沿用