Vue Cli 是 Vue.js 官方提供的腳手架工具，能夠幫助我們快速搭建 Vue.js 項目，開始我們的開發工作。除了提供了項目基礎架構搭建外，Vue Cli 還提供了許多常用插件功能以及各種配置項，讓我們在項目開發中更加輕松、高效。

在 Vue.js 項目開發中，新建頁面是我們經常需要做的事情。這篇文章將介紹在 Vue Cli 中如何快速新建頁面，以及這些頁面文件的作用和相關配置。

在 Vue Cli 中，我們可以通過如下命令來創建新建頁面：

vue generate page [page-name]

其中 [page-name] 表示你想要創建的頁面的名稱。執行該命令后，Vue Cli 會自動在 src/pages 目錄下創建以 [page-name] 為名的文件夾，文件夾下包含了我們需要的四個文件：index.vue、index.js、index.scss 和 README.md。

其中 index.vue 文件是我們新建頁面的主要文件，它負責頁面的布局和渲染。index.js 文件是這個頁面的入口文件，我們可以在這里進行數據的交互和業務邏輯的處理。index.scss 文件主要定義頁面的樣式。

需要注意的是，這里新建的頁面是單頁應用程序（SPA）中的一部分，因此這些文件僅在當前頁面中被使用。如果你想在多個頁面使用相同的組件或模塊，可以在 src/components 或 src/modules 目錄下創建文件。這些文件將被整個應用程序使用。

除了上述文件之外，生成的頁面文件夾還包含了 README.md 文件。這個文件提供了關于這個頁面的簡單說明和使用示例，對于項目協作和維護來說都非常有幫助。

如果我們想要修改新建頁面的默認配置，可以在 Vue Cli 的配置文件（vue.config.js）中指定相關參數。例如，我們可以在該配置文件的 pages 對象中添加新頁面：

module.exports = {
pages: {
home: {
entry: 'src/pages/home/index.js',
template: 'public/index.html',
filename: 'home.html'
},
about: {
entry: 'src/pages/about/index.js',
template: 'public/index.html',
filename: 'about.html'
}
}
}

以上配置表明我們添加了兩個新頁面：home 和 about。entry 表示頁面入口文件，template 表示頁面模板文件，filename 表示生成的頁面文件名。這樣配置后，我們運行 npm run serve 命令即可在瀏覽器中查看這些頁面。

總的來說，Vue Cli 為我們提供了快捷的方式來創建新的 Vue.js 頁面，減少了開發人員的工作量，也為更加高效的項目開發奠定了基礎。