vue3+ts搭建后台管理系统

安装 Vue CLI

首先，需要安装 Vue CLI。

npm install -g @vue/cli

创建项目

在命令行中运行以下命令创建项目：

vue create my-admin-system

在创建项目时，需要选择 TypeScript 选项。

安装 Element UI

Element UI 是一套基于 Vue.js 的组件库，我们可以使用它来快速搭建后台管理系统的界面。

运行以下命令安装 Element UI：

npm install element-ui -S

配置 TypeScript

在项目中增加 TypeScript 支持，需要安装以下依赖：

npm install --save-dev typescript ts-loader

在项目根目录下创建 tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["webpack-env", "jest"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

配置 Element UI

在 main.ts 中导入 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

创建组件

在 src/components 目录下创建组件。

创建路由

在 src/router 目录下创建路由文件。

创建页面

在 src/views 目录下创建页面。

运行项目

运行以下命令启动项目：

npm run serve

打开浏览器访问 http://localhost:8080 即可查看效果。

以上就是使用 Vue3 + TypeScript 搭建后台管理系统的基本流程。