创建Vue+TS+Ant Design of Vue 项目

Evan Liu

已于 2022-02-16 19:01:14 修改

阅读量915

点赞数 3

分类专栏：项目部署文章标签： vue.js typescript javascript

于 2022-02-16 18:49:35 首次发布

本文链接：https://blog.youkuaiyun.com/ChaunceyLX/article/details/122959265

版权

本文介绍了如何创建一个Vue项目，结合TypeScript和Ant Design of Vue进行配置，包括创建项目、安装依赖、配置ant-design-vue、解决报错等步骤，最后顺利运行项目，为愉快的编码之旅做好准备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建Vue+TS+Ant Design of Vue 项目

创建项目
选择配置
运行项目
安装 ant-design-vue
安装 babel-plugin-import
使用VS Code打开
配置 ant-design-vue
- 新建`plugins\Ant\index.ts`
- 修改`main.ts`
- 修改`babel.config.js`
- 修改`HelloWorld.vue`
运行项目
解决报错
- 新建`vue.config.js`

创建项目

	vue3 create vue-ts-ant-demo 
	// 这里的vue3是因为小编同时安装了vue2、vue3而设置的环境变量，大家可以根据自身实际情况使用即可。

创建项目

选择配置

选择配置
安装完成

运行项目

	cd vue-ts-ant-demo
	npm run serve

进入项目并运行
运行项目
浏览器访问

安装 ant-design-vue

	npm install ant-design-vue@next --save

安装 ant-design-vue

安装 babel-plugin-import

	npm install  babel-plugin-import --save-dev

安装 babel-plugin-import

使用VS Code打开

配置 ant-design-vue

新建`plugins\Ant\index.ts`

$新建plugins\Ant\index.ts$

import {
    Button,Input,Steps,Form,Select,Row,Radio

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Evan Liu

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

ant design vue 步骤条step加气泡卡片popover

jduksa的博客

01-11

2343

在官网的基础上做了点修改官网：https://www.antdv.com/components/steps-cn/   <a-steps :current="Step" @change="onStepChange"> <a-step v-for="(item, index) in Steps" :key="index" :title="item"&gt

vue-ts-antDesign-admin:vue + typescript + ant-desing-vue开发的后台管理系统模板

03-11

管理项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 运行单元测试 npm run test:unit

2 条评论您还未登录，请先登录后发表或查看评论

简述vue3(ts)+antdesignvue项目框架搭建基本步骤

缺点灵气儿的笔记本

07-30

5587

Vue 3（使用TypeScript）和Ant Design Vue项目框架搭建是指在Vue 3框架下，结合使用TypeScript编程语言和Ant Design Vue UI库，创建一个基本的项目结构和配置。Vue 3：Vue.js是一个流行的JavaScript框架，用于构建用户界面。Vue 3是Vue.js的最新版本，引入了一些改进和新功能，提供更好的性能和开发体验。TypeScript：TypeScript是JavaScript的一个超集，添加了静态类型检查和更多的面向对象编程特性。

【Ant Design of Vue】开发环境搭建

Tellsea

12-20

2249

文章目录1、ant-design-vue-pro 使用教程（1）本地构建项目源码（2）设置全局默认语言为中文 1、ant-design-vue-pro 使用教程（1）本地构建项目源码拉取项目代码 git clone https://github.com/vueComponent/ant-design-vue-pro.git cd ant-design-vue-pro 安装依赖 yarn install 开发模式运行 yarn run serve 编译项目 yarn run build Lints

Ant-design-vue小项目

qq_41206014的博客

09-02

909

2. 安装Ant-design-vue2. 安装axios3. 在main.js文件中引入依赖，并使用4. 在vue.config.js中关掉lintOnSave。

基于AntDesign组件的Vue项目

waillyer的博客

02-20

1145

Ant Design of Vue Ant Design of Vue 这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。官网创建项目 vue create my-project 请参照上一篇文章 vue-cli4.4.1+elementUI搭建后台系统

基于Vue3 + Ant-Design Vue + TS的后台管理系统.zip

01-03

Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。适用于初学者和有经验的开发者...

全栈-Vite3+Vue3+TS+Ant-design-vue3整合

11-07

使用vue3+ant-design-vue+vite+ts开发的通用后台框架.zip

01-04

使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 ...

Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip

01-03

Vue3+Vite+TypeScript+Ant Design Vue+Pinia是一个现代前端开发的组合，用于构建高效、可维护的后台管理系统。这个项目充分利用了这些技术的优势，提供了丰富的功能和优化的开发体验。以下是对这些技术及其在后台...

vue3、ts使用ant-design-vue

weixin_44440116的博客

11-29

3176

1.安装 yarn add ant-design-vue@next # OR npm i --save ant-design-vue@next 2.使用在main.ts文件中引入 import { createApp } from "vue"; import App from "./App.vue"; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; import router from "./route

基于AntDesignofVue实现的AntDesignProVue版

08-08

基于AntDesignofVue实现的AntDesignProVue版

vue3+ts+antd环境搭建

weixin_39065287的博客

07-27

966

vue3+ts+antd环境搭建 1、vue create video-clip 脚手架创建项目 2、 3、 4、 5 8、删除无关文件 9、引入antd npm i --save ant-design-vue@next main.ts中引入antd import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.c

vue3+ts+ant-design

m0_55301924的博客

07-10

367

创建一个vue3+ts+ant-design的项目,并附上报错和解决办法

ant-design-vue

扶强的专栏

10-19

2702

所有组件 <a-button></a-button> 按钮组件 <a-icon type="exclamation" /> icon图标 <a-row></a-row> <a-col></a-col> Grid删格组件 <a-layout></a-layout> layout布局组件 <a-space></a-space> space间距组件 <a-affix>&

搭建vue3+vite+ts+ant-design项目

weixin_48406322的博客

05-24

338

1.新建vue3+vite+ts项目。选择TypeScript。

elementui 搭建布局页面路由_仿有赞后台+vue+ts+vuecli3.0+elementUi+二期项目结构文件搭建+以及路由的使用...

weixin_39782433的博客

12-18

288

昨天写了 vue + ts + vuecli3.0 第一场主要是一个 vuecli 搭建的内容，今天讲一下 vue 项目结构搭建+以及路由的使用，看了一个小伙伴 $refs 报错问题有大佬可以回复我一波困扰已久，伸手党本人寻求帮助哈哈！在说这个之前我会介绍一下我写整个这个后台检索的逻辑，我们搜索的条件放到了url上面那么重置按钮就可以复用了，所有的搜索条件在url优势是可以刷新页面之前的操作记录...

vue3+ant design vue+ts实战【ant-design-vue组件库引入】

最新发布

m0_74151368的博客

04-17

471

基于ant-design做步骤条的弹窗

vue3 +vite+ant design vue+ts

03-23

### 集成 Vue3、Vite、Ant Design Vue 和 TypeScript 的解决方案 #### 项目初始化通过 `npm` 初始化一个新的 Vite 项目，可以选择 Vue 和 TypeScript 支持作为初始配置选项。命令如下： ```bash npm create vite@latest my-project --template vue-ts ``` 这一步会创建一个基础的 Vue3 + TypeScript 项目结构[^2]。 #### 安装 Ant Design Vue 组件库为了引入 Ant Design Vue 并支持其功能模块化加载，可以安装以下插件并调整项目的依赖项： ```bash npm install ant-design-vue npm install unplugin-vue-components -D ``` 其中，`unplugin-vue-components` 是用于按需加载组件的重要工具，能够显著减少打包体积和提升性能[^4]。 #### 使用 Pinia 替代 Vuex Pinia 是 Vue3 中推荐的状态管理库，相较于传统的 Vuex 更加轻量级且易于维护。可以通过以下方式安装： ```bash npm install pinia ``` 随后，在应用入口文件中注册 Pinia 实例即可完成状态管理的基础设置[^3]。 #### 自定义主题样式如果需要实现自定义的主题颜色或其他 CSS 变量修改，则可通过 Ant Design Vue 提供的相关文档指导来操作。通常涉及编辑 `.env` 文件或者在 `vite.config.ts` 中指定路径指向用户定义的 LESS/SASS 文件位置[^5]。 #### 推荐模板项目对于希望快速搭建具备上述技术栈特性的完整后台管理系统而言，“vue-vben-admin”是一个非常优秀的开源示例工程。它不仅涵盖了本文提到的技术要点还包含了更多高级特性如权限控制等实际应用场景下的考量因素。运行此模板前先克隆仓库到本地再按照常规流程执行必要的环境准备步骤即能体验整个系统的运作情况： ```bash git clone https://github.com/anncwb/vue-vben-admin.git cd vue-vben-admin yarn install yarn serve ``` 以上就是针对您询问有关如何将Vue3,Vite,AntDesignVue以及TypeScript结合起来建立前端开发环境的一个概述说明[^1].