VAQ-DOCS

# Directory Structure

vue-apicloud-quickstart follows the principle of "Convention is better than configuration", the recommended document structure is as follows:

.
├── public                   # Static resource
│   ├── index.html           # Page template
│   └── res                  # Static resource
├── src
│   ├── pages                # Page entry
│   └── config               # Configuration entry
|       └── pages.json       # Page configuration
├── index.html               # APP entrance
├── config.xml               # APICloud project configuration file
├── .syncignore              # APICloud wifi-sync ignore file
├── ...
└── package.json

Note

When naming files and directories, please follow the code encryption specifications of the APICloud platform as much as possible, as follows：

  • Folder naming, file naming cannot be - or more . , Do not have uppercase characters
  • Example of correct file naming format: login.js
  • Example of incorrect file naming format: login-test.js; login.test.js; login-test-js.js
  • Example of correct folder naming format： loginhtml
  • Example of incorrect folder naming format： login-html; login.html
  • public: Static resource directory.
  • public/index.html: Page template.
  • public/res: Directory of static media resources.
  • src/pages: Page directory.
  • src/config: Directory for the configuration files.
  • src/config/pages.json: Page configuration file.
  • index.html: The APP entrance is only used when debugging of Loader WiFi on the mobile side or formal packaging.
  • config.xml: APICloud project configuration file.
  • .syncignore: APICloud wifi-sync ignore file.

Note

When you want to create a new page in the src/pages directory, you must configure related parameters insrc/config/pages.json to take effect.

If you use Typescript, you need to add the following configuration to tsconfig.json:

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

Also see:

# Default Page

When debugging in the browser (debugOnPC istrue), you need to manually enter the full page path in the address bar to properly open the page debugging. For example, the following file directory structure exists:

.
├── public
│   ├── index.html
│   └── res
|        └── img
|             └── logo.png
├── src
|   |
│   ├── pages
|   |   ├── index
|   |   |   └── index.vue
|   |   ├── login
|   |   |   └── index.vue
|   |   └── home
|   |       ├── index.vue
|   |       └── web.vue
│   └── config
|       └── pages.json

The corresponding page configuration in the src/config/pages.json is as follows:

[
  {
    "title": "开屏广告页",
    "name": "index",
    "path": "index/index"
  },
  {
    "title": "登录页",
    "name": "login",
    "path": "login/index"
  },
  {
    "title": "应用首页",
    "name": "home",
    "path": "home/index"
  },
  {
    "title": "web页面",
    "name": "web",
    "path": "home/web"
  }
]

The corresponding compiled page file path is as follows:

.
├── js
│   ├── chunk-vendors.js
│   ├── indexindex.js
│   ├── loginindex.js
│   ├── homeindex.js
│   └── homeweb.js
├── index.html
├── indexindex.html
├── loginindex.html
├── homeindex.html
├── homeweb.html
├── favicon.ico
├── res
│    └── img
│         └── logo.png

tip

You can enter /webpack-dev-server in the browser to view the compiled file directory structure. The page of index.html is Page Navigation，it is only used for PC browser side debugging page, which will be ignored when building package.

← Asset Handling →