[vue3+vite+tsx] 项目搭建详细流程

目录

1. 环境要求
2. Vite + Vue3 搭建初始化
3. 路由 Router 的安装和配置
4. 配置 tsx 支持
5. less 的安装和使用
6. 样式统一引入
7. ElementUI 的安装和使用
8. vite 配置路径别名
9. i18n 配置多语言
10. 设计系统的 Layout UI
11. 设计菜单栏+权限控制
12. 设计 API 目录
13. 配置 mock
14. 功能页面编写

1. 环境要求

• node：Node.js 版本 >= 12.0.0，目前使用版本：v14.16.0
• 包管理工具：npm/yarn，目前使用的是 yarn：v1.22.10
• 编辑器：VSCode

2. Vite + Vue3 搭建初始化

1. 全局安装 vite

yarn global add vite


# 安装vite+vue3.0项目，Vite 需要 Node.js 版本 >= 12.0.0。
D:/
# 基于vite搭建项目，项目名：rbac-manage，前端框架使用vue，开发语言：typescript
yarn create vite
# √ Project name: ... rbac-manage
# √ Select a framework: » vue
# √ Select a variant: » vue-ts

# 切换工作目录到rbac-manage，
cd rbac-manage
# 下载项目运行的前端依赖模块

2. 基于 vite 搭建项目，项目名：rbac-manage，前端框架使用 vue3，开发语言：TypeScript

yarn create vite

# √ Project name: ... rbac-manage
# √ Select a framework: » vue
# √ Select a variant: » vue-ts

3. 启动项目

# 切换工作目录到rbac-manage
cd rbac-manage
# 下载项目运行的前端依赖模块
yarn
# 启动测试服务器，运行vue项目
yarn dev

至此，一个由 Vite 构建的 Vue3 项目就搭建好了，支持 TypeScript 语法。

3. 路由 Router 的安装和配置

1. 安装 vue-router 4.x

yarn add vue-router@next

2. 配置路由模块

创建src/router/index.ts，代码：

import {
   createRouter, Router, createWebHistory, RouteRecordRaw} from 'vue-router'

// 路由列表
const routes:Array<RouteRecordRaw> = [
  // 省略，见项目src/router/index.ts具体代码
]

const router:Router = createRouter({
   
  // history, 指定路由的模式
  history: createWebHistory(),
  // 路由列表
  routes,
});

export default router

根据项目的模块划分，设计项目目录和项目路由如下：

• 创建src/views目录，然后分别添加 login 目录，member 目录，device 目录，operator 目录，point-group目录，scenario 目录，wbs 目录，每个目录添加 Index.vue 文件，作为每个模块的入口文件，如下图：
• 更新项目路由src/router/index.ts中的 router 如下：

const routes: Array<RouteRecordRaw> = [
  {
   
    name: "index",
    path: "/",
    redirect: "/member",
  },
  {
   
    name: "Login",
    path: "/login",
    component: () => import("../views/login/Index.vue"),
  },
  {
   
    name: "Member",
    path: "/member",
    component: () => import("../views/member/Index.vue"),
  },
  {
   
    name: "Device",
    path: "/device",
    component: () => import("../views/device/Index.vue"),
  },
  {