使用Vite2+TypeScript4+Vue3技术栈,如何入手开发项目
前言
今天,我们使用Vite2.0+Vue3+TS来试玩一下,开发一个demo项目。
实战
我们,打开Vite官方网站(https://cn.vitejs.dev/)。
Vite (法语意为 “快速的”,发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:
一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可以输出用于生产环境的优化过的静态资源。
Vite 意在提供开箱即用的配置,同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性,并有完整的类型支持。
这里,我们将Vite与VueCLI做一下对比。
Vite在开发模式下不需要打包可以直接运行,使用的是ES6的模块化加载规则;
VueCLI开发模式下必须对项目打包才可以运行;
Vite基于缓存的热更新;
VueCLI基于webpack的热更新;
搭建项目
我们来搭建第一个 Vite 项目,我这里使用Yarn依赖管理工具进行创建项目。
yarn create @vitejs/app
在命令行键入以上命令,然后你可能会等待一会儿~
依次配置Project name、Select a template
Project name: vite-vue-demo
Select a template: vue-ts
因为,我们这里要是用Vue+Ts开发项目所以我们选择vue-ts这个模板。一顿操作之后,会提示你键入以下命令,依次填入即可。
cd vite-vue-demo
yarn
yarn dev
这样我们搭建项目就完成了。
项目文件夹一览
我们会看到以下文件及其文件夹。
node_modules —依赖文件夹
public —公共文件夹
src —项目主要文件夹
.gitignore —排除git提交配置文件
index.html —入口文件
package.json —模块描述文件
tsconfig.json —ts配置文件
vite.config.ts —vite配置文件
开发前配置
在开发之前呢,我们需要做以下工作。
- 编辑ts配置文件
根据需要,配置需要的配置项。compilerOptions里面配置的是编译时的配置项,include项是配置生效包括在内的路径,而exclude则恰恰相反,排除在外的路径。
{
“compilerOptions”: {
“target”: “esnext”,
“module”: “esnext”,
“strict”: true,
“jsx”: “preserve”,
“importHelpers”: true,
“moduleResolution”: “node”,
“experimentalDecorators”: true,
“skipLibCheck”: true,
“esModuleInterop”: true,
“allowSyntheticDefaultImports”: true,
“sourceMap”: true,
“baseUrl”: “.”,
“types”: [“vite/client”],
“paths”: {
“@/": [
"src/”
]
},
“lib”: [
“esnext”,
“dom”,
“dom.iterable”,
“scripthost”
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118720717
使用Vite2+TypeScript4+Vue3技术栈,如何入手开发项目的更多相关文章
- IT技术栈、JAVA技术栈、游戏开发技术栈
一.形成IT思想,把各种技术融会贯通,使用时按需对技术选型. 二.对于每个知识点,框架的掌握依次分为三层. 1.会使用 2.熟悉原理 3.了解源码 三.思维导图
- 20151028整理罗列某种开发所包括对技术(技术栈),“较为全面”地表述各种技术大系的图表:系统开发技术栈图、Web前端技术栈图、数据库技术栈图、.NET技术栈图
———————————— 我的软件开发生涯 (10年开发经验总结和爆栈人生) 爆栈人生 现在流行说全栈.每种开发都有其相关的技术.您是否觉得难以罗列某种开发所包括对技术(技术栈)呢? 您是否想过: ...
- Node.js最新Web技术栈(2016年4月)
Node.js是比较简单的,只有你有前端js基础,那就按照我的办法来吧!一周足矣,虽然这版上了es语法,但依然是可以简单写,也可以难写,参见<全栈工程师之路-Node.js>,里面讲了No ...
- SaaS技术栈有多复杂?
[特别声明:本文基于Tools and Services I Use to Run My SaaS进行修改.] 软件SaaS化由于需要考量架构的各个方面,所以需要的技术栈非常全面. 以一个客户管理Sa ...
- 【建议收藏】缺少 Vue3 和 Spring Boot 的实战项目经验?我这儿有啊!
缺少 Vue3 和 Spring Boot 的实战项目经验?缺少学习项目和练手项目?我这儿有啊! 从 2019 年到 2021 年,空闲时间里陆陆续续做了一些开源项目,推荐给大家啊!记得点赞和收藏噢! ...
- 如何使用Microsoft技术栈
Microsoft技术栈最近有大量的变迁,这使得开发人员和领导者都想知道他们到底应该关注哪些技术.Microsoft自己并不想从官方层面上反对Silverlight这样的技术,相对而言他们更喜欢让这种 ...
- 快速了解Scala技术栈
http://www.infoq.com/cn/articles/scala-technology/ 我无可救药地成为了Scala的超级粉丝.在我使用Scala开发项目以及编写框架后,它就仿佛凝聚成为 ...
- 【Scala】Scala技术栈
快速了解Scala技术栈 我无可救药地成为了Scala的超级粉丝.在我使用Scala开发项目以及编写框架后,它就仿佛凝聚成为一个巨大的黑洞,吸引力使我不得不飞向它,以至于开始背离Java.固然Java ...
- 通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? .Net Web开发技术栈
通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core? 什么是.NET?什么是.NET Framework?本文将从上往下,循序渐进的介绍一系列相关.NET的概念 ...
随机推荐
- 【Example】C++ STL 常用容器概述
前排提醒: 由于 Microsoft Docs 全是机翻.所以本文表格是我人脑补翻+审校. 如果有纰漏.模糊及时评论反馈. 序列式容器 序列容器是指在逻辑上以线性排列方式存储给定类型元素的容器. 这些 ...
- 用Eclipse远程调试服务器tomcat
BEGIN; 在做远程调试时,在windows系统和非windows系统下的配置,Tomcat中会有所差别,具体如下: 第一步.配置tomcat 一.在windows系统中: 打开�TALINE_HO ...
- Python识别图片中的文字
1 import os,glob 2 def photo_compression(original_imgage,tmp_image_path): 3 '''图片备份.压缩:param origina ...
- PowerDotNet平台化软件架构设计与实现系列(13):应用监控平台
本文再写一篇和具体业务逻辑几乎无关的公共服务应用监控平台.PowerDotNet自研的应用监控平台系统,是服务治理的重要拼图,和服务治理平台配合使用效果更好. 监控开源产品非常丰富,站在巨人的肩膀上, ...
- 【Istio实际操作篇】Istio入门,10分钟快速安装
@ 目录 前言 本文说明 请大家务必查看 环境准备 详细版 入门:搭建步骤 Istio软件包下载 下载Istio 卸载 简洁版 安装 卸载 学习不走弯路,gz号「yeTechLog」 前言 上一篇讲了 ...
- gcc和g++是什么,有什么区别?
点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 素材来源:C语言中文网 编辑整理:strongerHua ...
- IP地址的格式和分类,你都清楚吗?
一个执着于技术的公众号 在网际层中,利用 IP 地址将数据传输到目的地.为了能够使数据正确地发送到目标主机上,网络上的 IP 地址必须有一定的规则来识别主机的位置. IP地址的基本构成 为了便于寻址, ...
- Spring按业务模块输出日志到不同的文件
一.背景 在我们开发的过程中,可能存在如下情况: 1.有些时候我们需要调用第三方的接口,一般情况下,调用接口,我们都会记录请求的入参和响应的.如果我们自己系统的日志和第三方的日志混合到一个日志文件中, ...
- 栈在go语言中实现,及解决388.文件的最长绝对路径的思路
今天在LeetCode刷每日一题,遇到了388. 文件的最长绝对路径的思路,这道题让我想到了系统的目录是栈结构,果然在题解中找到了栈的解法(暴力半天没出来,跑去看题解了QWQ). 所以我就捎带复习了一 ...
- SUSE系统---keepalived的搭建
作为博客第一篇,先小尝初试一下搭建keepalived,因为项目需要搭建集群,为了满足需要,需要服务器对外暴露个虚拟IP,进行集群部署. 第一步:先把keepalived.tra.gz压缩包放到相应目 ...