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

原创 已于 2022-02-16 19:01:14 修改 · 960 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #typescript #javascript

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

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

创建项目

	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打开

使用VS Code打开
使用VS Code打开

配置 ant-design-vue

       新建plugins\Ant\index.ts

新建plugins\Ant\index.ts

import {
   
    Button,Input,Steps,Form,Select,Row,Radio,</
最低0.47元/天 解锁文章
简述vue3(ts)+antdesignvue项目框架搭建基本步骤
缺点灵气儿的笔记本
07-30 5867
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的一个超集，添加了静态类型检查和更多的面向对象编程特性。
Nuxt3+Vue3(Composition API)+TS+Vite+Ant Design Vue 搭建
woyebuzhidao321的博客
02-16 3977
最近官网搭建选择了nuxtjs，由于框架更新了，其中语法也有很多变化，中间遇到了一些问题点做下总结。
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
【Ant Design of Vue】开发环境搭建
Tellsea
12-20 2347
文章目录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 1182
2. 安装Ant-design-vue2. 安装axios3. 在main.js文件中引入依赖，并使用4. 在vue.config.js中关掉lintOnSave。
基于Vue3 + Ant-Design Vue + TS的后台管理系统.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
在本项目中，我们探索了如何使用最新技术栈进行全栈开发，重点是前端的Vite3、Vue3、TypeScript以及Ant Design Vue3的整合，同时涉及后端的SpringBoot、MybatisPlus和MySQL。这是一个全面的实战教程，旨在帮助开发者...
使用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是一个现代前端开发的组合，用于构建高效、可维护的后台管理系统。这个项目充分利用了这些技术的优势，提供了丰富的功能和优化的开发体验。以下是对这些技术及其在后台...
基于AntDesign组件的Vue项目
waillyer的博客
02-20 1239
Ant Design of Vue Ant Design of Vue 这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。 官网 创建项目 vue create my-project 请参照上一篇文章 vue-cli4.4.1+elementUI搭建后台系统
基于AntDesignofVue实现的AntDesignProVue版
08-08
基于AntDesignofVue实现的AntDesignProVue版
vue3、ts使用ant-design-vue
weixin_44440116的博客
11-29 3263
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
vue3+ts+antd环境搭建
weixin_39065287的博客
07-27 1013
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 416
创建一个vue3+ts+ant-design的项目,并附上报错和解决办法
ant-design-vue
扶强的专栏
10-19 2882
所有组件 <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 375
1.新建vue3+vite+ts项目。选择TypeScript。
elementui 搭建布局页面路由_仿有赞后台+vue+ts+vuecli3.0+elementUi+二期项目结构文件搭建+以及路由的使用...
weixin_39782433的博客
12-18 313
昨天写了 vue + ts + vuecli3.0 第一场主要是一个 vuecli 搭建的内容，今天讲一下 vue 项目结构搭建+以及路由的使用，看了一个小伙伴 $refs 报错问题有大佬可以回复我一波困扰已久，伸手党本人寻求帮助哈哈！在说这个之前我会介绍一下我写整个这个后台检索的逻辑，我们搜索的条件放到了url上面 那么重置按钮就可以复用了，所有的搜索条件在url优势是可以刷新页面之前的操作记录...
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
热门推荐
XSL_HR的博客
10-19 1万+
一个好项目的编写不仅需要完美的逻辑，以及相应的技术，同时也需要一个设计规范的高质量UI组件库。本期文章将会详细讲解Ant Design Vue组件库的安装、引入和使用。
ant design+vue3 的steps组件步骤条使用
m0_74151368的博客
04-17 1007
基于ant-design做步骤条的弹窗
vue3+vite+ts+ant design vue创建项目
最新发布
11-12
使用 Vue3、Vite、TypeScript 和 Ant Design Vue 创建项目的详细步骤如下： ### 1. 使用 Vite 创建 Vue3 项目 可以使用以下命令全局安装 Vite 并创建 Vue3 项目： ```bash # 全局安装 Vite npm install -g create-vite-app # 使用 Vite 创建 Vue3 项目 create-vite-app vue3-vite ``` 也可以使用以下命令创建项目： ```bash # 创建项目 npm init vite-app 项目名 # 或者使用 yarn yarn create vite-app 项目名 # 进入项目目录 cd 项目名 # 安装依赖 yarn install ``` ### 2. 配置 TypeScript - 安装 TypeScript： ```bash yarn add typescript -D ``` - 初始化 `tsconfig.json`： ```bash npx tsc --init ``` - 将 `main.js` 修改为 `main.ts` [^4]。 ### 3. 安装和配置 Vuex - 安装 Vuex： ```bash npm install vuex@next --save ``` - 在项目 `src` 目录下面新建 `store` 目录，并添加 `index.ts` 文件，添加以下内容： ```typescript import { createStore } from 'vuex' interface State { userName: string } export default createStore({ state(): State { return { userName: "vuex", }; }, }); ``` ### 4. 配置 Ant Design Vue 在安装和配置 Ant Design Vue 时，需要先安装 Ant Design Vue 依赖： ```bash npm install ant-design-vue ``` 然后在 `main.ts` 中引入并使用： ```typescript import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App) app.use(Antd) app.mount('#app') ``` ### 5. 启动项目 ```bash yarn dev ```
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Evan Liu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值