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

最新推荐文章于 2024-02-29 15:04:42 发布
最新推荐文章于 2024-02-29 15:04:42 发布
阅读量227 收藏
点赞数
文章标签： typescript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48406322/article/details/130805260
版权

搭建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 文件
    在这里插入图片描述
小陆很忙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3+vite5+typescript+antDesign实战详解附代码，框架可以直接跑起来用，5分钟搞定一个自定义主题风格和登录权限的万能的SASS系统
为了WLB努力
03-06 762
vue3+vite5+typescript+antDesign实战详解附代码，框架可以直接跑起来用，5分钟搞定一个自定义主题风格和登录权限的万能的SASS系统
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 项目
Vue3应用之使用Vite搭建Vue3项目以及TypeScript、Vue Router、Vuex、Ant Design的使用
热门推荐
XH_jing的博客
01-05 1万+
尤大的 Vue3.0 已经发布有一阵子了， 已经很成熟了。今天想起来，是时候该上手体验分享一波了。 前言 大家都知道，在 Vue3 生态系统中有一个新构建工具 Vite ，它的开发服务器比 Vue CLI 快 10 ~ 100倍，是不是很好奇？具体的内容可以移步至：迟到的 Vue3.0 与 Vite 的体验学习总结 的 七、Vite 与 Vue CLI 阅读。 本文将主要分享如何使用 Vite 来创建一个 Vue3.0 的项目，并且结合相关内容（TypeScript、Vue Router、Vuex、An.
VUE3+vite+Ant Design+TS-后台管理系统-动态菜单问题
最新发布
wanwandeguoguo的博客
02-29 481
VUE3+vite+Ant Design+TS后台管理系统动态菜单实现流程以及问题解决
【Vue3实战教程】从零搭建种子项目Vue3+TypeScript+Vant+Vite微信公众号H5项目（含：依赖插件文档、esLint配置、prettier配置、git提交代码钩子校验、移动端适配）
学Java的小前端的博客
08-11 5056
前言 由于最近公司需要重构老的公众号H5项目，都没有时间摸鱼看瓜了（ WYF 和 DMZ 懂的都懂 ）。。。闲话不多说，最后技术选型决定使用最新的 Vue 3 + TypeScript + Vant + Vite 来构建项目，下面会做一些详细的记录，加深下对项目的理解和印象。 npm init @vitejs/app 执行完毕之后按照下图所示操作初始化 Vue 3 + TypeScript + Vite 基础项目。 接下来的 install 和启动项目的步骤不做陈述，不懂的下面更看不懂，自行百度吧
vite+vue3+ts+tsx+ant-design-vue项目框架搭建
yemuxia_sinian的博客
12-11 1917
vite+ts+vue3+tsx+ant-design-vue搭建的项目框架，
一款基于当前最前沿的前端（Vue3 + Vite + Antdv）和后台（Spring boot）实现的低代码开发平台
07-05
一款基于当前最前沿的前端（Vue3 + Vite + Antdv）和后台（Spring boot）实现的低代码开发平台。该项目采用主流开发框架，无论打包、编译、部署都按着大公司的标准完成并不断逐步完善
基于Vue3+Vite+TS+AntDv+ Pinia从零搭建一个项目
wangshuo0520ai的博客
07-12 1573
基于Vue3+Vite+TS+AntDv+ Pinia从零搭建一个项目
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（1）
TJ1532635942的博客
08-23 4286
本文编写的目的是为了基于vite、vue3、ts搭建开箱即用的前端应用框架模板，会实现axios、vue-router和pinia的封装和基本使用。
vite创建vue3+ts+ant design vue项目
weixin_45042868的博客
04-27 3280
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
Vue3-Vite-TS-AntD项目搭建
qq_37148353的博客
05-03 3068
vue3使用vite和ts创建项目
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
全栈开发实战技术分享 前端:Vite3+Vue3+TS+Ant-design-vue3 后端:SpringBoot+MybatisPlus+Mysql
Vue3+Vite+Ant Design 后台管理系统模板.zip
07-06
Vue3+Vite+Ant Design 后台管理系统模板.zip
使用vue3+ant-design-vue+vite+ts开发的通用后台框架.zip
01-04
使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 ...
vite-vue3-admin：基于vite2.0 + vue3.0 + ant-design-vue2.0 +打字稿挂钩
03-03
vue3-antd基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0的后台管理系统模板账号：admin，密码：123456系统模块数据是从先前获取来的真实数据，路由也是从内部动态获取的，而只是通过内网穿透提供访问的，难免发生...
使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统.zip
01-22
Vue 3.2 -- 使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统、动态菜单、国际化、mock数据、表格集成快速使用等功能，简洁干净开箱即用。. 各领域数据集，工具源码，适合毕业设计、课程设计...
Vue3+TypeScript+AntD+Vite+Less+VsCode的完整项目构建及插件推荐
aaaaanqi的博客
10-04 2916
目录使用Vite创建Vue项目 就是尝试一下目前较流行且新的技术栈，以下配置较完整，希望大家看完这篇就可以构建一个完整的Vue3项目框架。 使用Vite创建Vue项目 首先看vite官网，要求 Node版本 >=12.0.0； 在cmd中运行 npm init vite@latest 出现上图，输入项目名称（直接输，不用删除vite-project，它是个未输入时的默认显示），这里我输入了demo，然后按Enter往下 按up、down选择，选好后按回车，我选择vue，继续往下 这里我选择
React+Antd+Vite+TypeScript 项目实战教程
IT飞牛
05-10 4138
本教程属于react入门教程，课程围绕如何搭建一个简单的登录页面展开，会带你快速了解react、redux、redux-devtool、react-router-dom、axiox这些常见技术的使用方式，教程最后会附上项目源码。
Vue3+TypeScript+Router+Vuex+Ant-Design-Vue项目（三）—— 使用 vite 搭建项目
且听风吟的博客
04-11 1264
vite构建项目
vue3+vite+ts如何按需引入Ant Design
04-13
可以使用 babel-plugin-import 插件来按需引入 Ant Design。具体步骤如下： 1. 安装 babel-plugin-import 插件： ```shell npm install babel-plugin-import -D ``` 2. 在 babel.config.js 中配置插件： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值