文档

脚手架简介

更新时间:

本文介绍项目初始化结构及其子目录的构成。

初始化结构

项目初始化结构如下:

project
├── mock
│   ├── mock.config.js
│   └── rpc
│       └── test.js
├── package.json
├── www
└── src
    ├── common
    │   ├── components
    │   ├── css
    │   │   └── base.less
    │   ├── img
    │   └── js
    ├── layout
    │   ├── index.html
    │   └── layout.html
    └── pages
        └── index
            ├── components
            ├── index.js
            └── store

子目录

mock

该目录提供了一种数据 mock 方式,即使用 cnpm run dev:mock 启动时,会自动加载其中的 rpc 目录和 jsapi 目录的对应数据接口。

package.json

package.json 文件中的 kylinApp 字段包含了项目配置的元信息,主要有 pagesoutputdevPortpluginsdirAlias

简单举例如下:

{
  "kylinApp": {
    "output": "www",
    "pages": {
      "index": {...}
    },
    "devPort": 8090,
    "dirAlias": {
      "common": "./src/common/",
      "pages": "./src/pages/"
    },
    "plugins": [

    ]
  }
}

www

执行 cnpm run build 后,会自动将构建产物输出到 www 目录中。

src/common

用以放置项目中使用的 CSS、JS、IMG 文件。

src/layout

对应 ./src/pages/${pageName} 的各个页面,可以在 package.json 中配置对应页面使用的 HTML 模板路径。支持 Nunjucks 语法。

src/pages

此目录用于存放各个页面。页面存放于 ./src/pages/${pageName}/ 目录下,各页面分别包含 components , storeindex.js

  • components 目录中,每个组件都是 Vue 组件,具体编写规范请参考 组件规范

  • store 目录中,有一个 Vuex.Store 实例,具体使用请参考 状态注入

  • index.js 为当前 page 的主入口,这里的 page 页面最后会生成一个特定的 ${pageName}.html 页面。

常用参数

下表的常用参数是指 kylinApp 下一级中,除了 pages、plugins 之外的所有键值。pages、plugins 将在下文单独展开。

参数名

类型

默认值

备注

output

String

dist

输出相对目录。

devPort

Number

8090

dev 模式监听的 IPv4 端口号(0.0.0.0:devPort)。

dirAlias

Record

{}

等同于 webpack.resolve.alias 中使用 相对路径

pageTemplate

String

-

公共 Nunjucks 模板。

pages

此处列举 pages 键值对下的配置项,示例中的 home 表示以下配置均为对 pageNamehome 的页面生效。

{
  "kylinApp": {
    "pages": {
      "home": {
        ... // 这里的字段
      }
    }
  }
}

字段名

类型

备注

entry

String

相对路径,指向当前页面的 JS 打包入口。

template

String

相对路径,指向当前页面的 HTML 打包路径,如果为空,会寻找 kylinApp.pageTemplate 字段值。

plugins

kylinApp.plugins 字段,是一个数组,支持按需加载各个插件。

{
  kylinApp: {
    plugins: [
      "xxxx",
      ["yyyy",{ a: 1 }],
      "zzzz",
      ["6666",{ b: 1 }]
    ]
  }
}

支持传入的形式有 2 种,分别是 默认配置扩展配置 方式,在上述的示例中,引入了 4 个插件。

  • @ali/kylin-plugin-xxxx,以默认配置加载。

  • @ali/kylin-plugin-yyyy,以 {a:1} 选项加载。

  • @ali/kylin-plugin-zzzz,以默认配置加载。

  • @ali/kylin-plugin-6666,以 {b:1} 选项加载。

已有插件

目前,支持配置的插件有 mockresource,分别参见以下文档:

  • 本页导读 (0)