Vue 3 前端框架构建指南：Webpack 5、Typescript 和 Vue CLI 5

很高兴为您提供一个基于 Vue 3、Webpack 5、Typescript 和 Vue CLI 5 的前端框架。

首先，您需要安装 Vue CLI 5：

npm install -g @vue/cli

然后，创建一个新项目：

vue create my-project --preset direct:https://github.com/vuejs/vue-next-webpack-preview/tree/cli

这将创建一个基于 Vue 3 和 Webpack 5 的项目，并使用 Vue CLI 5 进行构建。现在，我们将添加 Typescript 支持：

vue add typescript

这将自动更新您的项目，以便支持 Typescript 和相关的 Webpack 插件。接下来，我们将添加一些常用的插件和库：

npm install --save-dev sass-loader node-sass @vue/cli-plugin-router @vue/cli-plugin-eslint @vue/cli-plugin-unit-jest @vue/test-utils
npm install vue-router axios

这将安装 SASS 支持、Vue Router、Axios 和其他一些依赖项。现在，您可以开始编写代码了！在 src 文件夹中创建一个 App.vue 文件，以及一个 router 文件夹和一个 views 文件夹：

// App.vue
<template>
  <div>
    <router-link to='/'>Home</router-link>
    <router-link to='/about'>About</router-link>
    <router-view></router-view>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'App'
});
</script>

// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const routes: Array<RouteRecordRaw> = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

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

export default router;

// views/Home.vue
<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to my awesome app!</p>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Home'
});
</script>

// views/About.vue
<template>
  <div>
    <h1>About</h1>
    <p>Learn more about us!</p>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'About'
});
</script>

这将创建一个简单的 Vue Router 应用程序，其中有两个视图：Home 和 About。您可以使用 SASS 样式来美化您的应用程序，并使用 Axios 进行数据获取。您还可以使用 Jest 和 Vue Test Utils 来编写单元测试。现在，您可以使用以下命令启动您的应用程序：

npm run serve

祝你好运！