无界AI教程项目--引入框架就组件（二）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

前言

一、环境准备

二、vue-element-admin

三、Ant-Design-Pro

1、安装 框架标题二

2、引入组件

四、TDesign Starter

1、安装TDesign脚手架

2、初始化项目

（1）初始化指令

（2）可能遇到的问题

总结

---

前言

目前使用较多的组件库有elementUI、antDesign、tDesign三个，对应的前后端解决方案为

组件库	解决方案	地址	备注
elementUI	vue-element-admin	gitee、github	两个相同，gitee仅为方便国内用户访问
antDesign	Ant Design Pro	github
tDesign	TDesign Starter	github	解决方案区分几个版本，具体的参考TDesign Starter 页面模板 (tencent.com)

本项目使用的框架是Ant Design Pro，组件库以Ant Design为主，但部分引用了其他组件库的组件。如TDesign的树形可编辑表格

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、环境准备

准备好vue开发需要的环境配置

二、vue-element-admin

参照：vue-element-admin

三、Ant-Design-Pro

1、安装框架

参照：Ant Design Pro of Vue (antdv.com)

2、引入组件

鉴于本人见识较小，了解的表格组件中，能够较好的展示树形数据结构，一级较好编辑功能的表格主要是TDsign的表格组件，其他的表格组件大部分不符合个人的期望，所以项目组引入的就是TDsign的表格组件EnhancedTable。

（1）安装TDsign依赖

npm i tdesign-vue@naruto    // Vue 2.7 使用

（2）组件按需引入（main.js中引入需要的组件，没必要全部引入，如果全局引入的话，可能会出现部分组件冲突导致报错）

import { Table as TTable, EnhancedTable as TEnhancedTable } from 'tdesign-vue'
import 'tdesign-vue/es/style/index.css'
Vue.use(TEnhancedTable)

（3）使用组件

        全局引入后，tdsign表格组件就可以直接使用了

四、TDesign Starter

官方文档

1、安装TDesign脚手架

npm i tdesign-starter-cli@latest -g

2、初始化项目

（1）初始化指令

td-starter init

（2）可能遇到的问题

①找不到babel/core

​

解决办法：

npm install -g @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime

初始化项目时直接安装即可，但可能也会出现babel/core相关的其他问题，有的是版本不匹配导致，网上处理方式较多。

②项目名称注意不要有空格

​

（3）安装依赖

npm install

（4）启动

npm run dev

三、引入

---

总结