使用 Vue CLI 创建项目_使用_每个页面都有自己的入口文件和根组件可以独立运行和开发

作者：机器人技术佬 | 发布时间：2025-06-20 |

使用 Vue CLI 创建项目

Vue CLI 真是个神器，能帮你快速搭起 Vue 项目。要是还没装，赶紧装一个。然后，用这个命令来创建新项目：

``` vue create my-project ```

创建项目的时候，选“手动选择功能”，别忘了勾选 Router 和 Vuex（要是用得着的话）。

项目创建好，进到项目目录里：

``` cd my-project ```

配置 `vue.config.js` 文件

在项目根目录下，创建或编辑 vue.config.js 文件，设置多页面应用。得在文件里加个 pages 选项，像这样：

```javascript module.exports = { pages: { index: { entry: 'src/main.js', template: 'public/index.html', filename: 'index.html', title: '首页', chunks: ['chunk-vendors', 'chunk-common', 'index'] }, about: { entry: 'src/about.js', template: 'public/about.html', filename: 'about.html', title: '关于我们', chunks: ['chunk-vendors', 'chunk-common', 'about'] } } } ```

这里定义了两个页面：首页和关于我们。每个页面都有自己的入口文件、模板文件、输出文件名、页面标题和需要的代码块。

创建页面目录结构

根据 vue.config.js 文件中的配置，创建相应的目录结构。在 src 目录下创建 pages 文件夹，然后在里面创建 index 和 about 文件夹。每个文件夹里都应该有一个 main.js 文件和一个 index.html 文件。

目录结构如下：

``` src/ ├── pages/ │ ├── index/ │ │ ├── index.html │ │ └── main.js │ └── about/ │ ├── about.html │ └── main.js └── main.js ```

配置页面入口文件

在 index 和 about 文件中配置每个页面的入口文件：

```javascript // index/main.js import Vue from 'vue' import App from './App.vue' new Vue({ render: h => h(App), }).$mount('app') // about/main.js import Vue from 'vue' import App from './App.vue' new Vue({ render: h => h(App), }).$mount('app') ```

这里，index/main.js 的内容与 about/main.js 类似，只是把导入的 App.vue 文件换成了相应的文件。

配置路由和状态管理（可选）

如果你的项目需要用 Vue Router 和 Vuex，可以在 main.js 和 router/index.js 文件中配置它们。示例如下：

```javascript // main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' new Vue({ router, store, render: h => h(App), }).$mount('app') // router/index.js import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home.vue' import About from '@/components/About.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] }) ```

构建和运行项目

完成上述配置后，你可以用以下命令构建和运行项目：

``` npm run serve ```

你已经成功配置了一个 Vue 多页面应用程序。每个页面都有自己的入口文件和模板文件，可以独立加载和渲染。根据项目需求，你可以继续添加更多的页面和功能。

在 Vue2 中创建多页面应用程序，Vue CLI 真是帮了大忙。首先用 Vue CLI 创建项目，然后在 vue.config.js 文件中定义多个页面。接着创建目录结构和页面入口文件，如果需要的话，配置路由和状态管理。最后，构建并运行项目，确保一切正常。

建议和行动步骤

深入学习 Vue CLI 和 Vue Router：了解这些工具的高级功能，以便更好地使用它们。
优化性能：确保每个页面加载的资源尽可能少，以提高页面加载速度和性能。
使用组件复用：在多个页面之间共享组件，减少代码重复，提高代码可维护性。
测试和调试：在开发过程中进行充分的测试和调试，确保每个页面的功能和交互正常。

使用 Vue CLI 创建项目_使用_每个页面都有自己的入口文件和根组件可以独立运行和开发