NgCortex CLI

快速上手

实际项目开发中，你会需要对 TypeScript 代码的构建、调试、打包部署等一系列工程化的需求。 我们强烈建议使用 @ng-cortex/cli 工具链辅助进行开发，下面我们用一个简单的实例来说明。

安装脚手架工具

npm install -g @ng-cortex/cli

创建一个项目

执行以下命令，在当前目录下新建一个名称为 PROJECT-NAME 的文件夹，并自动安装好相应依赖。

nc new PROJECT-NAME

开发调试

一键启动调试，运行成功后显示欢迎页面。

nc serve --open

创建一个库

执行以下命令，创建一个名称为 LIBRARY-NAME 的库。

nc generate library LIBRARY-NAME

库是前端封装的最小物理单位，新创建的库是空白的，直接构建会出错，请继续在库里创建并导出页面、模块和组件等内容。

然后进入库的 src 目录。

cd ./projects/LIBRARY-NAME/src

创建一个页面

执行以下命令，创建一个名称为 PAGE-NAME 的页面，在当前目录下建立页面需要的模块和组件，并导入路由模块。

nc generate page PAGE-NAME

模块和组件也是类似的方式创建，具体请输入 nc generate --help 查阅。

配置路由

在 src/app/app-routing.module.ts 中配置新创建的页面

/**
 * 路由配置列表
 */
const routes: NcRoute[] = [

    ...

    {
        path: 'main', component: LayoutComponent,
        children: [
            
            ...

            // 此处配置开发中的业务路由
            // 例如：
            // {
            //     path: '页面路由',
            //     data: { name: '页面标题', major: true, reused: true },
            //     loadChildren: () => import('库路径').then(library => library['模块名称'])
            // }
            {
                path: 'page-route',
                data: { name: 'Page Title', major: true, reused: true },
                loadChildren: () => import('library-path').then(library => library.PageModule)
            }
        ],
        canActivate: [NcAfterLoginGuard],
        canActivateChild: [NcAfterLoginGuard]
    },

    ...

];

构建和部署

执行以下命令，构建一个名称为 LIBRARY-NAME 的库。

nc build LIBRARY-NAME

文件会被打包到 dist 目录中。