All Products
Search
Document Center

Introduction to Scaffolding

Last Updated: Apr 12, 2022

This topic describes the project initialization structure.

Initialization structure

The project initialization structure is as follows:

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

Subdirectory

mock

This directory provides a data mocking method. When the startup adopts the cnpm run dev:mock method, the data APIs that correspond to the rpc and jsapi directories are automatically loaded.

package.json

The kylinApp field in the package.json file contains the metadata about project configurations, including pages, output, devPort, plugins, and dirAlias.

The following code shows a simple example:

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

    ]
  }
}

www

The output of cnpm run build command are automatically exported to the www directory.

src/common

This directory stores the css, js, and img files that are used in the project.

src/layout

This directory corresponds to the pages in the ./src/pages/${pageName} directory. You can configure the HTML template path used by the corresponding page in the package.json file. This directory supports the nujuncks syntax.

src/pages

This directory stores pages. Each page is stored in the corresponding ./src/pages/${pageName}/ directory. The directory for each page contains the components and store directories and the index.js file.

  • In the components directory, each component is a Vue component. For information about coding standards, see Component specifications.

  • The store directory contains a Vuex.Store instance. For more information, see Status injection.

  • The index.js file is the main entry of the current page. The page generates a specific ${pageName}.html page.

Frequently used parameters

Frequently used parameters refer to all key values other than pages, options, and plugins at the lower level of kylinApp. pages, options, and plugins are described separately in the following sections.

Parameter

Type

Default value

Remarks

output

String

dist

The relative directory of output.

devPort

Number

8090

The IPv4 port number used for listening in dev mode. Value: 0.0.0.0:devPort.

dirAlias

Record

{}

Equivalent to the relative path used in webpack.resolve.alias.

pageTemplate

String

-

The public Nunjucks template.

pages

The following code lists the configuration items of the pages key-value pair. The home in the example indicates that the configurations are valid only for pages whose pageName is home.

{
  "kylinApp": {
    "pages": {
      "home": {
        ... // List fields.
      }
    }
  }
}

Field

Type

Default value

Remarks

entry

String

-

The relative path that redirects to the JS packaging entry of the current page.

template

String

-

The relative path that redirects to the HTML packaging path of the current page. If this field is empty, the value of the kylinApp.pageTemplate field will be used.

plugins

The kylinApp.plugins field is an array that supports loading plug-ins on demand.

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

You can import plug-ins in two modes: default configuration and extended configuration. The preceding example imports the following plug-ins:

  • @ali/kylin-plugin-xxxx, which is loaded in default configuration mode.

  • @ali/kylin-plugin-yyyy, which is loaded by using the {a:1} option.

  • @ali/kylin-plugin-zzzz, which is loaded in default configuration mode.

  • @ali/kylin-plugin-6666, which is loaded by using the {b:1} option.

Existing plug-ins

Configurable plug-ins include mock and resource. For more information, see the following topics: