使用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的概念 ...
随机推荐
- Lumia一键刷稳定版 Win10 arm 及其报错处理
前言 之前我发了一篇Lumia1520 刷Win10 arm双系统的文章,不过后来发现那个方法对小白来说太不友好,且系统也不稳定,所以我找到了更好的方法 刷机 我们可以利用刷机迷进行刷机,支持一键刷机 ...
- MySQL创建高性能索引
参考<高性能MySQL>第3版 1 索引基础 1.1 索引作用 在MySQL中,查找数据时先在索引中找到对应的值,然后根据匹配的索引记录找到对应的数据行,假如要运行下面查询语句: 如果在u ...
- 【高并发】不得不说的线程池与ThreadPoolExecutor类浅析
大家好,我是冰河~~ 今天,我们一起来简单聊聊线程池中的ThreadPoolExecutor类,好了,不多说了,开始进入今天的正题. 一.抛砖引玉 既然Java中支持以多线程的方式来执行相应的任务,但 ...
- PicLite 开发日志 (v0.0.3)
PicLite 开发日志 (v0.0.3) 感谢您阅读本片文章! Gitee 地址:https://gitee.com/XiaoQuQuSD/pic-lite. 新增功能 当错误出现时不再强制 rai ...
- epoll 函数解析
本文参考社长的 TinyWebServer 庖丁解牛 epoll 常用API epoll_create 函数 #include <sys/epoll.h> int epoll_create ...
- nova服务的基本使用
创建flavor类型 [root@controller ~]# openstack help flavor create usage: openstack flavor create [-h] [-f ...
- drools的类型声明(Type declarations)
一.背景 在我们编写drl规则的时候,有些时候需要自己声明一些类,用于辅助之后的规则运行,如果需要用到的类还需要在java中预先声明出来,这样就不灵活了,那么是否可以在drl文件中声明一个类呢?可以使 ...
- 详解CVE-2022-0847 DirtyPipe漏洞
摘要:本文详细介绍了CVE-2022-0847漏洞形成根因,相应补丁修复方法,通过本文让读者对CVE-2022-0847漏洞有更清晰的了解. 本文分享自华为云社区<CVE-2022-0847 D ...
- python之名称空间与函数对象
目录 名称空间 内置名称空间 全局名称空间 局部名称空间 名称的查找顺序 作用域 global关键字 nonlocal关键字 函数名的多种用法 函数的嵌套 名称空间 名称空间就是变量名与变量值绑定关系 ...
- 论文阅读 Predicting Dynamic Embedding Trajectory in Temporal Interaction Networks
6 Predicting Dynamic Embedding Trajectory in Temporal Interaction Networks link:https://arxiv.org/ab ...