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

最新推荐文章于 2024-02-29 15:04:42 发布
最新推荐文章于 2024-02-29 15:04:42 发布
阅读量284 收藏
点赞数
文章标签： typescript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48406322/article/details/130805260
版权
本文介绍了如何使用npm初始化一个Vue3+vite+ts项目，并集成ant-design-vue2.0.0-rc.3。在过程中遇到ant-design-vue1.7.x与vue3语法不兼容的问题，通过升级到2.0及以上版本解决。此外，还提到TypeScript配置中需将moduleResolution设为node，以解决找不到vue模块的错误。
摘要由CSDN通过智能技术生成

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

环境

  1. node 18.16.0

步骤

1.新建vue3+vite+ts项目
npm init vite@latest
输入项目名称
输入
选择vue
在这里插入图片描述
选择TypeScript
在这里插入图片描述
按照提示运行
在这里插入图片描述

  1. 集成ant-design-vue
    npm install ant-design-vue@2.0.0-rc.3 -save

遇到的问题

  1. ant-design-vue版本问题。一开始安装了ant-design-vue@1.7.x，开始报错在这里插入图片描述
    由于vue3语法升级，将 import Vue from 'vue’改为import { createApp } from ‘vue’，需要使用2.0及以上版本的ant-design-vue
  2. 部分语法报红，但可以正常运行
    在这里插入图片描述
    找不到 vue模块 需要将 moduleResolution设置成node
    找到 tsconfig.json 文件
    在这里插入图片描述
小陆很忙
关注
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（1）
TJ1532635942的博客
08-23 4502
本文编写的目的是为了基于vite、vue3、ts搭建开箱即用的前端应用框架模板，会实现axios、vue-router和pinia的封装和基本使用。
vue3+ts+ant-design
m0_55301924的博客
07-10 302
创建一个vue3+ts+ant-design的项目,并附上报错和解决办法
Vue3-Vite-TS-AntD项目搭建
qq_37148353的博客
05-03 3441
vue3使用vite和ts创建项目
vue3+ts+antd环境搭建
weixin_39065287的博客
07-27 924
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+vite+ts+pinia+element-puls+Ant Design Vue 手把手教你创建一个vue3项目
qq_45585640的博客
08-29 616
函数将会返回 store 模块的实例，然后我们就可以使用其中的状态和操作了。注意，这里的状态和操作是响应式的，所以在模块中的任何更改都将会立即反映到组件的模板中。打开 vite.config.ts 文件。然后控制台出现后面这三条命令。
全栈-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+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统.zip
01-22
Vue 3.2 -- 使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统、动态菜单、国际化、mock数据、表格集成快速使用等功能，简洁干净开箱即用。. 各领域数据集，工具源码，适合毕业设计、课程设计...
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
01-03
Vue3+Vite+TypeScript+Ant Design Vue+Pinia是一个现代前端开发的组合，用于构建高效、可维护的后台管理系统。这个项目充分利用了这些技术的优势，提供了丰富的功能和优化的开发体验。以下是对这些技术及其在后台...
Vue3+Vite+Ant Design 后台管理系统模板.zip
07-06
Vue3+Vite+Ant Design 后台管理系统模板是一个现代且高效的前端开发框架组合，用于构建功能丰富的Web应用。这个模板结合了Vue.js的最新版本3、Vite构建工具以及Ant Design Vue UI库，旨在提供一个快速开发后台管理...
vue3-ts-base:一个基于vue3 + typescript + ant-design-vue的构建的基础代码库，有完善的类型系统，帮助快速构建vue3的基础代码架构
03-11
项目基础代码架构说明 如果对你有帮助的话，欢迎star demo演示地址： : 包管理工具 建议使用yarn，也是vue-cli4.0 +默认工具 主要用到的库 vue全家桶vue3 + vue-router + vuex +打字稿 http请求：axios ui库：ant-design-vue。 提交规范：git cz commitizen 版本更改历史：changelog 文档工具：typedoc 代码检查：eslint + eslint-typescript，格式化：更漂亮。提交之前检查与修复：lint-staged mocha，ts-node webpack插件：style-resources-loader（较少）webpack-bundle-analyzer（包分析工具）splitChunks（代码分离） 代码基础架构说明 |-- 根目录 |-- dist 项目
vite创建vue3+ts+ant design vue项目
weixin_45042868的博客
04-27 3490
1.通过vite命令构建vue3+ts项目 npm init @vitejs/app or yarn create @vitejs/app 根据步骤选择 项目名称 框架（vue,react…） js或ts vite官网 2.安装ant design vue 安装2.x版本 npm i --save ant-design-vue@next ant design vue 官网 按需加载 vite按需加载需要引入插件 npm i vite-plugin-style-import -S 在vi
Vite构建项目：Vue3 + Ts + Pinia + VueRouter + AntDesignVue
weixin_45853098的博客
08-20 1014
本文记录快速构建Vite+Vue3项目的过程，包含TS+Vite+VueRouter+Pinia+TailWindCSS+AntDesignVue
Vue3做出B站【bilibili】 Vue3+TypeScript+ant-design-vue【快速入门一篇文章精通系列（一）前端项目案例】
程序员猫爪
03-08 5869
在前端方面我们使用的技术栈包括TypeScript Vue3 ant Design Vue axios echarts highcharts mockjs pinia vue-router 将生成的js文件都修改为ts文件 执行成功 安装TypeScript 安装完成后，在控制台运行如下命令，检查安装是否成功(3.x): 设置自动编译 3、配置项目 1）安装依赖 作为前端项目我们使用一些场景的依赖 这里我们只需要将以下依赖复制到package.json,重新运行 将package-loc
创建Vue+TS+Ant Design of Vue 项目
Evan Liu的博客
02-16 838
创建Vue+TS+Ant Design of Vue 项目 cd vue-ts-ant-demo npm run serve npm install ant-design-vue@next --save npm install babel-plugin-import --save-dev 使用VS Code打开 新建plugins\Ant\index.ts import { Button,Input,
基于Vue3+Vite+TS+AntDv+ Pinia从零搭建一个项目
wangshuo0520ai的博客
07-12 2179
基于Vue3+Vite+TS+AntDv+ Pinia从零搭建一个项目
VUE3+vite+Ant Design+TS-后台管理系统-动态菜单问题
最新发布
wanwandeguoguo的博客
02-29 656
VUE3+vite+Ant Design+TS后台管理系统动态菜单实现流程以及问题解决
vue3+ts+vite+ant学习记录
isjier的博客
09-18 1600
vue3+ts+vite+ant学习记录准备工作新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 准备工作 开始之前记得先更新一下vue版本 windows系统: 1、npm update -g @vue/cli //删除原
vite+vue3+ts+tsx+ant-design-vue项目框架搭建
yemuxia_sinian的博客
12-11 2778
vite+ts+vue3+tsx+ant-design-vue搭建的项目框架，
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值