vite入门/徒手搭建vite/配置vite/使用vite脚手架/vite步骤
以下内容全部以图片形式展示(自己动手尝试一下印象岂不是更深?)
当然啦,也有完整的,自己拉代码https://github.com/ispaomoya/build-vite.git
文章有点长,你忍一下
目录
一、了解一下webpack和vite
webpack就不用说了(不懂的话,这里有传送门)
徒手搭建webpack/配置webpack步骤/从0到1配置webpack/vuecli配置_ispaomoya博客-CSDN博客
vite它基于原生ES模块提供了丰富的内建功能,HMR的速度非常快速
一套构建指令,它使用rollup打开我们的代码,并且它是预配置的,可以输出生成环境的优化过的静态资源
目前webpack还是强的,vite也很厉害,但是vite还是需要一点时间
二、vite起步
我们是从0开始体验vite
先写目录结构
然后ctrl+~,1,npm init 初始化,2,自定义一个名字(我直接用文件夹的名字了)3一路回车
然后在index.html页面,右键live serve跑一下(live serve是什么看第一点webpack传送门)
2.1安装vite
2.2vite对css处理
可见vite自动帮我们处理了css
2.3vite对less处理
在vite中不再需要安装less-loader,但是还是要安装一下less
首先,编写less文件,然后安装一下,npm i less -D
2.4安装postcss
下面的配置我就不讲了,不懂为什么看第一点(webpack传送门)
安装一下,npm install postcss postcss-preset-env -D
配置postcss.config.js文件,然后验证
vite默认对ts也是支持的,这里就不验证了
三、安装vue
四、vite打包项目
4.1采用npx打包
执行以下打包命令,npx vite build
然后会在根目录下生成一个dist文件加如下图
如果你想看一下打包后的样子,可以在dist/idnex.html中右键点击live serve(方法一)
方法二
vite也有一个命令,可以查看打包后的内容,在终端输入npx vite preview
4.2vite用npm打包
ok,vite就讲到这
五、vite脚手架
下面的内容是创建整个vite
然后安装一下依赖,npm i
然后跑一下,npm run dev
再次更新------------我是更新分割线----------------------------------------------------------------------------------
现在vite出到3.2x了,给一个官网地址Vite中文网,现在是这样安装vite
得到的结果是....
好啦就到这里啦,这个目录结构自己看一下就好啦
结尾有彩蛋哈,如果你看到这的话
彩蛋就是:给大家上官方文档链接,下面的都是vite3,现在已经很方便了
中文的
英文的
相关文章
- 神经网络中的非参数化拓扑层
- 北京大数据协会数据分析师证书考试项目正式发布
- Go语言核心36讲(Go语言实战与应用十九)--学习笔记
- 《算法的宪法》揭密「黑盒子」:算法关乎数学,更关乎人
- 给5G基带也加上机器学习单元:高通的AI脑洞还有太多
- AI破解古文字登Nature封面:修复缺失文字,精确地理位置书写时间
- 使用乘法的交替方向方法对循环神经网络语言模型进行低位量化的研究
- “终于有人提996了” 网友把董明珠送上热搜
- p2pGNN:用于点对点网络中节点分类的分散图神经网络
- GnuPG漏洞(CVE-2018-12020) 修复
- 基于PCA的分类编码器用于分类到数字变量的转换
- VR丝滑全景指日可待?谷歌这个360° NeRF让人看到未来
- 听完2022年政府工作报告,这几点值得人工智能行业重点关注
- 技术分享|在Ubuntu下编译安装GreatSQL
- 大厂中层“再就业”:路难选,意难平
- 《叶问》38期,MGR整个集群挂掉后,如何才能自动选主,不用手动干预
- 通过复合贝叶斯优化来优化高维物理模拟
- 架构问题:调查差异性隐私对神经网络设计的影响
- 保护隐私的无服务器边缘学习与分散的小数据
- 俄罗斯否认将断开与国际互联网的连接,三年前曾进行过断网测试