web前端|Vue.js
Vue,vite,前端
web前端-Vue.js
本篇文章我们带大家初体验下Vue的新型前端构建工具 Vite，聊聊和vue-cli 初始化的目录有什么不同等，希望对大家有所帮助！
同学聚会网站源码,vscode新建一个工程,当前目录 ubuntu,tomcat 内存最大支持,爬虫定制交易,php yaf文档,河池seo关键词整站优化lzw
微擎 酒店 源码,ubuntu系统火狐汉化,如何将tomcat删除干净,scrapy 爬虫请求头,php未找到工作怎么办,smo seo semlzw
Vite和Vue3在 年应该不算个新事物了，但应该也有很多像我一样还没有接触过这两个 “新鲜玩意” 的。（学习视频分享：vuejs教学）
sso单点登录实现源码,vscode付费么,ubuntu 绘图,tomcat 修改-xmx,加密你的sqlite,响应式导航插件,h5前端框架源码,爬虫python常见问题,企业 php cms,台州温岭seo企业,运输公司网站源码,穿越特效html网页,简约wordpress模板lzw
这两样（Vite+Vue3）给我的感觉是完完全全的新鲜玩具，是新时代的潮流。
看着手里的webpack+Vue2，想着会不会像几年前的angularjs+gulp一样，成为历史。
临近年关，也有了一些闲暇时间，来认识一下被人安利多次的新型前端构建工具Vite+ 全新升级的Vue3吧！
从 Vite 开始
先来看看Vite的官方介绍吧。
可以看出，在本地开发时，Vite使用了原生 ES 模块：现代浏览器（比如最新版谷歌）已经不需要依赖webpack管理包模块，而是可以和Nodejs一样具有模块管理能力，这就是原生 ES 模块能力。
所以，在本地开发时，Vite省略了一些耗时的编译过程，热更新自然快。
在构建生产产物时，可以构建现代浏览器产物，也可以通过Rollup输出生产环境的高度优化过的静态资源。—— 这个高度优化到什么程度，我们可以在后面的文章里去探讨一下。
上手
Vite的上手使用很简单，直接运行npm create vite@latest命令即可。
输入命令后，需要添加项目名称和技术栈，可以看到可供选择的技术栈有这么几种（如下图）
vite支持的框架有 6 种，有一半我都不认识。
vanilla：Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。Vanilla JS 是世界上最轻量的JavaScript框架（没有之一） —— 其实这玩意就是原生 JS。vue/react：这两个应该不用过多介绍了吧。preact：React 的轻量级替代方案。lit：Lit 是一个简单的库，用于构建快速、轻量级的 Web 组件。（看了一眼语法，感觉还挺好玩的。）svelte：一个不使用Virtual DOM的库 —— 真酷。这个库的作者和Rollup的作者是同一人。
这里我选了vue+ts进行创建。
现在来看看，这个新建的项目目录长啥样吧。（如下图）
和用vue-cli初始化的目录有两处不同：
index.html入口文件被移到了根目录下。官方解释是：在开发期间 Vite 是一个服务器，而index.html是该 Vite 项目的入口文件。
vite.config.ts替代了vue.config.js，作为vite项目的配置文件。
接下来，我们看看package.json的内容吧。（如下）
{ "name": "vite-try", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.2.25" }, "devDependencies": { "@vitejs/plugin-vue": "^2.0.0", "typescript": "^4.4.4", "vite": "^2.7.2", "vue-tsc": "^0.29.8" }}
从上面可以看出，使用Vite初始化的Vue项目，Vue的版本已经是最新的Vue3了。而开发时依赖也从vue-cli/webpack系列切换到了vite系列。
启动项目
在体验Vue3新语法之前，先把项目启动，看看效果吧。
在使用npm i安装完依赖后，使用npm run dev即可启动本地开发模式了。
刚运行项目，启动速度着实让我吃了一惊。
这比Vue2初始化的项目启动也快太多了，刚一眨眼项目就已经启动了。
当然，我们从它的介绍可以得知，这是因为在本地开发时，Vite使用了原生 ES 模块，所以期间没有涉及模块编译过程，节约了不少时间。
查看本地运行的模块
我们打开控制台，先看看我们的html文件。（如下图）
从上午可以看出，html中引入了main.ts，也就是我们这个项目的入口文件。（如下图）
从上面这张图可以看出，代码还是原生的import，没有经过任何转译。
但是，在这里我看到请求的资源，有ts还有vue。
难道谷歌浏览器已经支持直接加载ts和vue文件了吗？其实并不是，这里的奥妙之处来自于文件的响应头 ——Content-Type，这决定了浏览器以什么样的方式处理该文件。（如下图）
如果你点开其他.vue文件可以看出，.vue文件还是经过编译，成为了可供浏览器识别的js类型，但模块还是使用了谷歌浏览器支持的原生 ES 模块。（如下图）
我们来看看页面长啥样吧。（如下图）
emmmmm，经典的Vue启动页。
上图的两行话引起了我的注意：
推荐使用的 IDE 是vscode+volar。
修改components/HelloWorld.vue来测试本地热更新功能。
vscode + volar
vscode是我一直用于写vue的代码编辑器，可volar是啥呢？
查了一下，原来是vscode中用于支持vue3语法的一个插件，可以用于智能语法提示和错误检查。（如下图）
果断安装一波。——学霸一把梭，差生文具多
文档中提到了，该插件可能会和vetur插件有冲突，建议两者只开启一个。（确实如此），所以在一个工作区内的话，只开一个插件吧，避免冲突。
本地热更新
接下来，我来修改components/HelloWorld.vue测试一下本地热更新功能。
修改代码后，保存的一瞬间就热更新完成了，几乎是感觉不到的。
构建项目
本地开发已经体验过了，现在来构建项目试试吧，看看产物长啥样。
使用npm run build命令可以构建项目。这里发现有个报错。（如下图）
我这是刚初始化的项目，怎么第一次构建就报错了呢？
这里看出报错是可选链操作符语法的报错，想了一下应该是node版本的问题。我本地的node版本是v12.20.0，在官方文档找了找，确实有相关的问题记录。（如下图）
看来vue + ts的模板依赖的node版本需要更高，我这里将node版本切换到v14.15.0，再次运行构建命令，就成功啦！（如下图）
最终构建的代码是由Rollup进行打包的，Rollup其实我也没用过，还是看看他的官方介绍吧。
这里主要还是了解一下rollup和webpack的区别，rollup的模块打包能力并没有webpack强大，但是利用了tree-shaking充分处理js文件，打包出来的js文件会比较 “干净”。
然后，我们进入dist目录，使用anywhere（一个简单的http服务器） 运行一下项目看看。
从上图可以看出，vite打包出来的文件，入口js是直接阻塞DOM渲染线程的。不过，这两个js的文件也不大，加起来才53k。
Vite 兼容性问题
一个新框架的推出，大家都比较关心它的社区活跃度，其次就是它的兼容性了。
我们来看看Vite打包出来的代码兼容性如何吧。（如下图）
据Vite官方介绍，默认配置构建出来的代码是只能支持现代浏览器的，也就是下面这些。
可以通过修改配置最低支持到es，也就是ES6（也就是说，IE 不支持）。
但是可以通过一个插件 ——@vitejs/plugin-legacy来支持传统浏览器（比如 IE11）。不过，IE11 好像也就是它的极限了，更低的版本可能会出现问题。
所以，如果你对于浏览器兼容要求比较严格的话，请谨慎使用Vite。
小结
好了，到这里，这次Vite的初体验，到这里就结束了。
用Vite新建一个项目，然后修改代码，查看变更。最后，构建项目，本地预览。
这一切用Vite来做还是比较简单的，而且很快！
我想，我会开始尝试用Vite+Vue3去写一些小项目练手，然后再看看有没有适合它的生产项目。
下次我再来聊聊我使用Vue3的初体验，欢迎大家持续关注。
（学习视频分享：web前端开发、编程入门）
