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 aVue
component. For information about coding standards, see Component specifications.The
store
directory contains aVuex.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 |
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 |
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: