• 一、项目创建
  • 1. 使用vue-cli创建项目
  • 2. 清除相关无用文件

一、项目创建

1. 使用vue-cli创建项目

• 相关命令

  # 使用vue-cli脚手架创建一个vue3的工程
  vue create projectName
  # 相关组件添加
  Babel, TS, Vuex, CSS[less/sass], Pre-processors, Linter[Airbnb]
  # 使用Class风格装饰器
  Use class-style component syntax? Yes
  # 使用Babel与TypeScript一起用于自动检测的填充
  Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

2. 清除相关无用文件

• App.vue初始化代码如下：

  <template>
    <router-view/>
  </template>
  <style lang="less"></style>

• 删除views文件夹下所有.vue文件
• 删除components文件夹下的所有.vue文件
• router/index.ts中初始化代码如下：

  import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
  const publicRoutes: Array<RouteRecordRaw> = [];
  const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes: publicRoutes,
  });
  export default router;

• 运行项目

  npm run serve