第二章 | Vue 开始学习前的一些准备

由于在快速开始这一章里面，我们通过 vue@latest 的项目生成工具生成 Vue 项目的基本架构，并且通过 npm run dev 命令启动项目，可以看到一个 Vue 的页面，尽管如此，这基本架构一键生成的页面文件对初学者来说很不友好，所以我们需要删除一些文件，从而开始学习 Vue。

要删除的文件有：

• src/views/AboutView.vue
• src/views/HomeView.vue
• src/router/index.ts
• src/App.vue
• src/main.ts
• src/assets/* # 删除 src/assets 文件夹下的所有文件
• src/components/* # 删除 src/components 文件夹下的所有文件

删除完成之后，在 src/views 文件夹下新建一个 BlankPage.vue 文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<template>
    <div>
      <!-- 空白页面内容 -->
    </div>
  </template>
  
  <script lang="ts">
  export default {
    name: 'BlankPage',
  };
  </script>
  
  <style scoped>
  /* 添加样式 */
  </style>

创建一个 App.vue 文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
export default {
  name: 'App',
};
</script>

<style>
/* 添加样式 */
</style>

在 src/router 文件夹下新建一个 index.ts 文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import { createRouter, createWebHistory } from 'vue-router';
import BlankPage from '../views/BlankPage.vue'; // 导入新的组件

const routes = [
  {
    path: '/blank', // 新的路由路径
    name: 'BlankPage',
    component: BlankPage,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

最后，就是修改 src/main.ts 文件，内容如下：

1
2
3
4
5

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 导入路由

createApp(App).use(router).mount('#app'); // 使用路由

完成这些事情以后，你就会看到这样的界面