vue创建一个新页面

Vue.js 创建一个新页面涉及到构建一个单页应用 (SPA) 的基本步骤，下面是一个详细的教程说明如何使用 Vue CLI 创建一个新的 Vue 应用，并部署到一个简单的 HTML 页面。

### 步骤 1: 安装 Node.js 和 NPM

首先，确保您已经安装了最新版本的 Node.js 和 npm。您可以从官网下载并安装最新的稳定版 https://nodejs.org/en/download/。

### 步骤 2: 使用 Vue CLI 创建项目

打开命令行工具，在你想要存放项目的文件夹下运行以下命令：

npx create-vue@latest my-app

这会生成一个新的 Vue 项目 "my-app"，你可以将 "my-app" 替换为你希望的项目名称。

### 步骤 3: 进入项目目录

使用 `cd` 命令进入到项目目录：

cd my-app

### 步骤 4: 启动开发服务器

执行以下命令启动开发服务器：

npm run serve

此时，浏览器应当自动跳转到 http://localhost:8080，你可以看到一个由 Vue CLI 自动生成的基础应用界面。

### 步骤 5: 添加新页面

为了添加新的页面，你需要在 `src/components` 目录下创建一个新组件。例如，创建一个名为 `new-page.vue` 的文件：

touch src/components/NewPage.vue

接下来，编辑 `NewPage.vue` 文件并添加对应的模板、脚本以及样式：

<template>
  <div class="new-page">
    <h1>欢迎来到新页面</h1>
    <!-- 根据需要在这里添加更多内容 -->
  </div>
</template>

<script>
export default {
  name: 'NewPage',
};
</script>

<style scoped>
.new-page {
  /* 可以添加样式 */
}
</style>

### 步骤 6: 注册和引入新组件

在 `main.js` 文件中注册并引入新组件：

import { createApp } from 'vue';
import App from './App.vue';

// 引入新组件
import NewPage from '../components/NewPage.vue';

createApp(App).component('NewPage', NewPage).mount('#app');

### 步骤 7: 配置路由

为了让用户可以访问到新页面，我们通常会采用单页面应用的路由机制。安装 Vue Router:

npm install vue-router

然后在 `src` 目录下创建 `router` 文件夹，并配置路由：

1. **创建 router/index.js**:

   import Vue from 'vue';
   import VueRouter from 'vue-router';

   Vue.use(VueRouter);

   const routes = [
     // 原有的路由条目
   ];

   export default new VueRouter({
     mode: 'history',
     routes,
   });

2. 修改 `App.vue` 或 `main.js` 中的 `<root>` 组件，添加 `<router-view>` 来显示路由匹配的内容：

   <div id="app">
     <nav>
       <!-- 菜单导航栏，如果需要的话 -->
     </nav>
     <router-view></router-view>
   </div>

3. **在 routes 数组中添加新页面的路由规则**:

   const routes = [
     // 其他已存在的路由，
     {
       path: '/new-page',
       component: () => import('../components/NewPage.vue'),
     },
   ];

最后，刷新浏览器，你应该能看到新页面通过路由系统加载并显示出来。

###