All Products
Search
Document Center

Introduction to Scaffolding

Last Updated: May 25, 2021

This topic describes the project initialization structure.

Initialization structure

The project initialization structure is as follows:

 
  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

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:

 
  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

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.

 
  1. {
  2. "kylinApp": {
  3. "pages": {
  4. "home": {
  5. ... // List fields.
  6. }
  7. }
  8. }
  9. }
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.

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

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: