全部产品
云市场
云游戏

脚手架简介

更新时间:2020-08-07 20:10:53

本文介绍项目初始化结构以及每个部分的详细说明。

初始化结构

项目初始化结构如下:

  1. project
  2. ├── mock
  3. ├── mock.config.js
  4. └── rpc
  5. └── test.js
  6. ├── package.json
  7. ├── www
  8. └── src
  9. ├── common
  10. ├── components
  11. ├── css
  12. └── base.less
  13. ├── img
  14. └── js
  15. ├── layout
  16. ├── index.html
  17. └── layout.html
  18. └── pages
  19. └── index
  20. ├── components
  21. ├── index.js
  22. └── store

子目录

mock

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

package.json

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

简单举例如下:

  1. {
  2. "kylinApp": {
  3. "output": "www",
  4. "pages": {
  5. "index": {...}
  6. },
  7. "devPort": 8090,
  8. "dirAlias": {
  9. "common": "./src/common/",
  10. "pages": "./src/pages/"
  11. },
  12. "plugins": [
  13. ]
  14. }
  15. }

www

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

src/common

用以放置项目中使用的 css,js,img 文件。

src/layout

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

src/pages

这个目录是用来放各个页面的,各个页面分别放在 ./src/pages/${pageName}/ 目录下。分别包含了 components , storeindex.js

  • components 目录中,每个组件都是 Vue 组件,具体编写规范请参考 组件规范
  • store 目录中,有一个 Vuex.Store 实例,具体使用请参考 状态注入
  • index.js 为当前 page 的主入口,这里的 page 页面最后会生成一个特定的 ${pageName}.html 页面。

常用参数

这里说到的常用参数是指 kylinApp 下一级中,除了 pagesoptionsplugins 之外的所有键值。pagesoptionsplugins 将在下面单独展开。

参数名 类型 默认值 备注
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 的页面生效。

  1. {
  2. "kylinApp": {
  3. "pages": {
  4. "home": {
  5. ... // 这里的字段
  6. }
  7. }
  8. }
  9. }
字段名 类型 默认值 备注
entry string - 相对路径,指向当前页面的 JS 打包入口。
template string - 相对路径,指向当前页面的 HTML 打包路径,如果为空,会寻找 kylinApp.pageTemplate 字段值。

plugins

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

  1. {
  2. kylinApp: {
  3. plugins: [
  4. "xxxx",
  5. ["yyyy",{ a: 1 }],
  6. "zzzz",
  7. ["6666",{ b: 1 }]
  8. ]
  9. }
  10. }

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

  • @ali/kylin-plugin-xxxx, 以默认配置加载。
  • @ali/kylin-plugin-yyyy, 以 {a:1} 选项加载。
  • @ali/kylin-plugin-zzzz, 以默认配置加载。
  • @ali/kylin-plugin-6666, 以 {b:1} 选项加载。

已有插件

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