十、vue3.0 + ts + vite 项目的创建

已于 2022-08-15 15:49:27 修改
阅读量516 收藏
点赞数 1
分类专栏： vue3.0的开发和学习 文章标签： vue.js 前端 javascript npm 开发语言
于 2022-07-11 18:36:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43185384/article/details/125727087
版权
本文档详细介绍了如何从头开始创建一个Vue3.0 TypeScript Vite项目，包括下载初始代码、安装依赖、配置环境，以及模板结构解读，特别关注了pinia状态管理和axios网络请求的组织结构。
摘要由CSDN通过智能技术生成

第一步：下载初始代码

git clone https://gitee.com/azoneui/vue3_ts_vite.git

示例图：

环境要求：

 node >= 14.16.0

 npm >= 6.14.11

        我使用的node版本是14.16.1，使用的是nvm版本管理工具，等有时间给大家更新一期nvm的安装和如何安装固定版本。

第二步：安装依赖

npm install

        Eslint:

了解本专栏 订阅专栏 解锁全文 超级会员免费看
arguments_zd
关注
专栏目录
订阅专栏
二十、vue3.0TS使用详解
张先森的博客
07-12 741
近一年公司前端开发开始使用Vue3+TS的框架，在使用的过程中出现了一些问题，比如经常使用any、定义不准确、报红、或者干脆不定义类型，让我们的代码看起来极其不优雅，失去了使用Ts的意义，今天我就详细讲讲什么是TS,如何使用TS，希望对大家以后的使用有所提升。
drag-demo:基于vue3.0 + ts的可视化组件拖拽demo
03-10
在本项目"drag-demo"中，我们探讨了一个基于Vue 3.0和TypeScript的可视化组件拖放（drag-and-drop）实现。这个演示利用了Vite作为构建工具，以及Vant UI库来增强用户界面。以下是对这些技术的详细解释： 1. **Vue ...
Vue3+TS + vite 创建项目
好的文章我尽力写，大家的学习我尽力帮
02-18 1718
一、首先给大家介绍一款极速搭建项目的构建工具（vite） vite 是一个由原生ESM驱动的Web开发构建工具，打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖里面已经引入了TypeScript ，甚至还有 vuex , vue-router , less , sass 这些本地开发经常需要用到的工具。vite 轻量，开箱即用的特点，满足了大部分开发场景的需求，作为快速启动本地 Vue项目来说，这是一个非常完美的工具。 npm init vite-
从零搭建 Vue3 + VIte + Ts 项目 —— 并集成eslint 、prettier、stylelint
最新发布
2401_87029641的博客
09-10 1809
虽然上面已经配置好了**
使用vite搭建vue3.0和ts项目过程
曹豆芽
04-13 1770
本篇豆芽主要也分享怎么使用vite去搭建vue-ts项目，搭建之前先来说一说vite,vite是一种新型前端构建工具，能够显著提升前端开发体验。那么豆芽对它的感觉来说，就是快。搭建快，运行快。想了解比较详情的可以访问vite的中文网(https://cn.vitejs.dev/)可以进一步了解，那么我们也不多说直接进入到正事。 首先我们先要去安装vite(以下的下载我都将使用npm) npm init @vitejs/app 这个时候我们会发现 npx: 5 安装成功，用时 1.15 秒 ? Projec
搭建Vue3.0+Ts+Vite项目
我是我
11-02 746
1. 创建vite+ts+vue3.0项目 npm init @vitejs/app -> y 输入项目名称：例 myvite 选择语言： vue -> vue-ts 之后根据提示 cd myvite npm install npm run dev 若启动项目过程中出现报错情况，请检查npm 版本，我使用的是v16.13.0 2. 安装vue-router@4 npm install vue-router@4 ...
从头构建vue3.0+ts+vite框架
weixin_43909743的博客
06-22 4348
vue3.0+ts+vite 框架搭建 细节 详解
vite + ts +vue3.0搭建
young_sam的博客
01-03 1299
1. vite环境搭建 安装vite环境 npm init @vitejs/app 或者 yarn create @vitejs/app 使用vite初始化vue+ts项目 npm init @vitejs/app my-vue-app 或者 yarn create @vitejs/app my-vue-app 执行上面命令后选择
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
总之，"基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板"是一个结合了前沿技术的项目，它集成了前端开发的最佳实践，为开发者提供了一个高效、稳定且美观的开发起点。通过深入理解和运用这些技术...
使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统.zip
01-22
Vue 3.2 -- 使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统、动态菜单、国际化、mock数据、表格集成快速使用等功能，简洁干净开箱即用。. 各领域数据集，工具源码，适合毕业设计、课程设计...
使用Vite+TS创建项目的操作步骤
NovaLog的博客
07-27 601
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。版本>=12.0.0。
vite2.0+vue3.0+ts
yang_web的博客
07-16 355
vite2.0+vue3.0+ts 1、template中可以有多个根元素，以前只能包在一个父容器中 <template> <p>{{count}}</p> <el-button type="primary" @click="clickTo">子组件</el-button> <el-button type="primary" @click="go">跳转</el-button> {{state.sum}} <van-b
0-1搭建vue3.0+vite+ts+less脚手架3——封装router、pinia
chuangtxj123的博客
09-07 373
封装router、pinia
vue3.0+vite+ts 重写手机端upload组件
weixin_41426457的博客
09-03 1811
前言 nice to meet you~ 认识一下 大家好~ 很高兴在这里写下了自己的第一篇文章。 先来个自我介绍，我之前是写php的，因此从前端的角度上来说，属于一个很野很野的野生程序猿 哈哈哈 因为都是自己在摸索…继续加油吧~ 由于公司业务，机缘巧合之下也兼顾了前端的工作，后来发现自己对前端还是挺有热枕的…就一直研究下去了，前端这几年变化的不是一般的大呀，前端的孩子们还学得动吗？ 哪些写得不好不要吐槽，哈哈 ~ 纯属个人分享学习，如果能帮到你会是我的荣幸。 github地址 里面有关于这个组件的完整
Vue3+Vite+TS+Axios整合详细教程
majingbobo的博客
07-14 2137
Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+ Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite 是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：它基于原生的es模块，提供了丰富的内建功能，如速度快到惊人的模块热更新HMR.
2023 最新最细 vite+vue3+ts 多页面项目架构，建议收藏备用！
热门推荐
坚信万物皆可切的切图仔
04-18 1万+
在搭建的过程中，一定要注意因为修改了项目根目录（root）所带来的问题，利用将路径重置到相对于项目根的位置！关于如何使用这个多页面脚手架，可以看 README.md 文件。github地址。
从零搭建vue3 + vite + ts 项目必备
夜空孤狼啸的博客
08-26 1115
从零搭建vue3 + vite + ts 项目必备This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 SFCs, check out the script setup docs to learn more. 安装项目规范 npm install eslint --save-dev#oryarn add eslint --devnpx e
vite+vue3+ts项目构建详细步骤（配置多语言版本）
失眠时间的博客
05-15 1万+
由于之前几乎都是使用Webpack 构建项目，偶尔使用了gulp。最近两年才开始使用Vue3开发项目，所以特意记录下Vite构建期间的使用方式。后续也会花时间写下webpack构建项目的文章，期待后期的更新～
vue3.0+ts+vite 界面关闭的时候关闭signalR
07-12
在Vue 3.0 + TypeScript + Vite项目中，您可以使用`beforeUnmount`钩子函数来在界面关闭时关闭SignalR连接。 首先，确保您已经安装了`@microsoft/signalr`库并进行了相应的配置。然后，在Vue组件中，您可以按照以下步骤关闭SignalR连接： 1. 在组件的`setup`函数中导入SignalR库并设置连接对象： ```typescript import { onBeforeUnmount, ref, Ref } from 'vue'; import { HubConnectionBuilder } from '@microsoft/signalr'; export default { setup() { const connection: Ref<HubConnection> = ref(null); // 创建SignalR连接 connection.value = new HubConnectionBuilder() .withUrl('/hubUrl') // 替换为您的SignalR Hub URL .build(); // 监听连接关闭事件 onBeforeUnmount(() => { // 关闭SignalR连接 connection.value.stop(); }); return { connection, }; }, }; ``` 2. 在`onBeforeUnmount`钩子函数中，调用SignalR连接对象的`stop()`方法来关闭连接。 这样，当组件所在的界面关闭时，SignalR连接将会被正确关闭。 请注意，以上示例假设您已经进行了SignalR的配置，并且在Vue组件中正确导入了相关的库。确保替换示例代码中的`/hubUrl`为您实际的SignalR Hub URL。 希望对您有所帮助！如果您有任何其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

arguments_zd

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

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

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

打赏作者

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

抵扣说明：

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

余额充值