English | 简体中文
vue-cli-plugin-pages
This is a vue-cli 3.x plugin to build multi-page application.
🔗 Table of contents
✨ Features
- Generate multi-page pages config.(Get the entries and filenames through
src/views/**/app.js)
{
"index": {
"entry": "src/views/index/app.js",
"filename": "index.html",
"template": "public/index.html"
},
"preview": {
"entry": "src/views/preview/app.js",
"filename": "preview.html",
"template": "public/index.html"
},
"multi-page~home": {
"entry": "src/views/multi-page/home/app.js",
"filename": "multi-page/home.html",
"template": "public/index.html"
},
"multi-page~subpage": {
"entry": "src/views/multi-page/subpage/app.js",
"filename": "multi-page/subpage.html",
"template": "public/index.html"
}
}
- Generate multi-page location to
logs/location.json.
{
"route": [
{ "name": "Index Page", "chunk": "index", "location": "index.html" },
{ "name": "Index Page", "chunk": "preview", "location": "preview.html" },
{
"name": "Home Page",
"chunk": "multi-page~home",
"location": "multi-page/home.html"
},
{
"name": "Subpage",
"chunk": "multi-page~subpage",
"location": "multi-page/subpage.html"
}
]
}
- Generate multi-page directory tree to
logs/tree.json.
{
"path": "#",
"name": "views",
"children": [
{
"path": "index.html",
"name": "Index Page",
"children": [],
"size": 135,
"type": "file",
"extension": ".js",
"merged": true
},
{
"path": "#",
"name": "Multi Page",
"children": [
{
"path": "multi-page/home.html",
"name": "Home Page",
"children": [],
"size": 135,
"type": "file",
"extension": ".js",
"merged": true
},
{
"path": "multi-page/subpage.html",
"name": "Subpage",
"children": [],
"size": 135,
"type": "file",
"extension": ".js",
"merged": true
}
],
"size": 270,
"type": "directory"
},
{
"path": "preview.html",
"name": "Index Page",
"children": [],
"size": 135,
"type": "file",
"extension": ".js",
"merged": true
}
],
"size": 540,
"type": "directory"
}
🔨 Usage
⚠️ Make sure you have vue-cli 3.x.x:
vue --version
If you don't have a project created with vue-cli 3.x yet:
vue create my-new-app
Navigate to the newly created project folder and add the cli plugin:
cd my-new-app
vue add pages
Start your app:
npm run serve