如何创建一个vite+vue3+ts项目（小白必看）

已于 2023-06-17 14:47:55 修改
阅读量2.6k 收藏 11
点赞数 5
CC 4.0 BY-SA版权
分类专栏： ❤️❤️--vue3核心技术栈 文章标签： vue.js vue3+ts构建项目 创建vue3项目 vue3+ts+vite 从零创建vue3项目 vite创建vue3项目
于 2023-06-15 16:06:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/131221069
本文详细介绍了如何从零开始创建一个vite+vue3+ts项目，包括创建项目、启动项目、解决配置问题以及逐步添加sass、vue-router、pinia、element-plus和axios等工程化插件。同时，还解决了ts配置中的一些常见问题，如路径别名设置。

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

了解本专栏 订阅专栏 解锁全文 超级会员免费看
记~Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 搭建项目基本框架
小白小白从不日别的博客
06-02 982
在style下创建scss相关的文件如下图主要看index.less里面的内容// 存放项目统一规范的变量// 自定义的 css 样式// 自定义主题样式// 修改 element-ui 样式修改入门的文件main.ts到这里一个基本的 基于 Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 的项目框架就搭建完成了。
搭建vue3+ts+vite项目
xhjtcflm的博客
07-10 1245
JavaScript modules (import/export) 选择采用js模块引入或暴露开发。npx eslint --init 初始化。vue.js 选择采用vue.js框架开发。5.cd 项目、pnpm install 、pnpm run dev。（1）下载eslint：pnpm i eslint -D。（2）生成配置文件：eslint.cjs。一、创建项目及项目初始化。
使用Vite搭建vue3+TS项目
Yan9_9的博客
12-09 3730
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它具有快速的冷启动，不需要等待打包操作；并且官网说是下一代的前端构建工具。
vite+vue3+ts 手把手教你创建一个vue3项目
热门推荐
weixin_59916662的博客
10-17 7万+
基本全程cv安装router，less / scss，pinia，axios，element / Ant Design Vue，Echarts ，mockjs，以及如何配置@别名，自定义组件，vue-devtools插件。
前端学习笔记——Vite项目从零开始构建
最新发布
Xiao_Mmhha的博客
05-14 2175
用于从零开始搭建Vite项目，方便我自己再次搭建，也方便大家使用。
搭建一个Vue3+Ts项目
weixin_45594156的博客
12-08 3551
Vite+Vue3+Ts+sass+Router+pinia+axios,Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
创建vue3+ts项目
qq_48783694的博客
03-12 5879
在开发项目的时候，经常会用到svg矢量图，使用svg矢量图之后，页面上加载的不再是图片资源，很大的提升了页面性能，svg文件比img小很多，在项目中机会不占资源。安装依赖：https://www.npmjs.com/package/vite-plugin-mock。官网地址：https://element-plus.gitee.io/zh-CN/API接口统一管理：创建src/api/use/index.ts以及type.ts。官网：https://stylelint.bootcss.com/
如何创建vue3+vite+ts的项目
qq_48009509的博客
02-12 573
本文章仅为新手提供刚接触vue3时不懂如何创建demo的教程。
Vue3+Vite+Ts(手把手教你创建项目)
唯见青山不见君
11-08 2839
手把手教你用Vue3+Vite+Ts搭建vue3项目
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
vue3+ts+vite+element-plus+pinia项目搭建的【详细教程】
weixin_43503406的博客
11-21 2716
帮助新手小白以及需要的人快速进行开发
基于vue3+vite+ts的可视化页面设计器（完整源码+说明）（可在线设计页面表单等，支持引入多种组件库和自定义组件）.zip
03-28
【资源说明】 1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请...3、不仅适合小白学习实战练习，也可作为大作业、课程设计、毕设项目、初期项目立项演示等，欢迎下载，互相学习，共同进步！
vite创建vue3+ts项目
s_156的博客
04-04 416
如下图最终返回一个本地地址，输入浏览器访问，能打开就没问题了（此处有提示Network：use–host to expose，该问题可在后面配置中解决，解决后再运行会多出几个局域网访问网址，这样只要和你在一个局域网的人都能通过地址访问你的页面了）（注意：下面安装的所有项目依赖包（都在根目录下安装），我的是这一层，可在vs打开的项目里新建控制台面板进行安装（注意路径即可），也可在cmd面板操作）（5）可以保存后，运行看是否报错。（3）选择vue（（有时出现上下键不能选择，手动输入选项回车就行））
TS+vue3项目的创建
m0_56072671的博客
09-16 303
Component name "XXX" should always be multi-word vue3+TS创建项目
构建一个 Vite + Vue 项目
enjoyenjoy576423146的博客
03-23 592
3、打开vite的官网，https://cn.vitejs.dev/guide/，找到最新创建命令。2）npm install是Node.js中的命令，用于安装Node.js包及其依赖项。注： my-vue-app 是你创建的项目文件名。这样就简单新建了一个vite+vue的项目了。1）第一个命令，打开刚刚创建的项目文件夹。1、打开cmd控制台，通过控制台创建。2、通过控制台打开指定位置文件夹。4、创建好的项目默认包含如下项目。
vue-cli3.0 搭建项目模版（ts+vuex+axios）
维克多噗噗的博客
07-02 4085
安装 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 npm install -g @vue/cli # OR yarn global add @vue/cli vue --version 创建 vue create hello-worl...
创建vue3+vite+ts项目
m0_65985318的博客
01-17 413
检查node和npm：如果提示命令不存在的话，需要到官网安装node.js：https://nodejs.cn/download/创建一个空文件夹，用于存放项目右键点击打开终端，并且运行如下命令： 如果报错如下：可以试着清除缓存，或者稍等片刻再尝试： 也可以使用镜像： 输入项目名称：选择vue:选择js或ts：创建完毕：按照提示运行三行命令：浏览器打开链接：可以下载添加一下常用依赖：vue-router： axios: element-plus: 在 vite.config.ts
如何创建一个完整的vite+vue项目
qq_74031198的博客
01-06 797
学习前端项目
vue3 ts vite项目
08-28
为搭建一个Vue3 TypeScript Vite项目，你可以按照以下步骤进行操作： 1. 首先，你需要掌握Vue3的基本使用。你可以参考我在Vue专栏中的《跟着官网学习Vue3》系列文章，这些文章应该能够帮助你基本掌握Vue3的使用方法。 2. 接下来，你可以考虑使用Pinia作为Vue的状态管理库，它可以满足小型项目的需求，并且使用简单。你可以尝试使用Pinia代替Vuex。 3. 在项目中使用windicss，它是一种轻量级的CSS框架，可以帮助你快速编写样式。 4. 最后，使用Vite作为打包工具，代替Webpack。Vite更加简单易用，而且天生支持许多类型的文件，比如SCSS文件，无需手动配置。如果你之前没有使用过Vite，也没有关系，通过学习一篇相关文章，你就能够掌握Vite的基本使用方法。 综上所述，你可以按照上述步骤来搭建一个Vue3 TypeScript Vite项目。希望对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [一篇文章教小白学会搭建 vite + ts + vue3 项目，手把手教程，不会算我输](https://blog.csdn.net/qq_17335549/article/details/128480583)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

suoh's Blog

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

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

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

打赏作者

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

抵扣说明：

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

余额充值