网站模板修改教程,南宁企业网站建设,wordpress部署到外网,在网站上找到漏洞之后怎么做1.Vue CLI脚手架
什么是Vue脚手架#xff1f;
在真实开发中我们不可能每一个项目从头来完成所有的webpack配置#xff0c;这样显示开发的效率会大大的降低#xff1b;所以在真实开发中#xff0c;我们通常会使用脚手架来创建一个项目#xff0c;Vue的项目我们使用的就是…1.Vue CLI脚手架
什么是Vue脚手架
在真实开发中我们不可能每一个项目从头来完成所有的webpack配置这样显示开发的效率会大大的降低所以在真实开发中我们通常会使用脚手架来创建一个项目Vue的项目我们使用的就是Vue的脚手架脚手架其实是建筑工程中的一个概念在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架
Vue的脚手架就是Vue CLI
CLI是Command-Line Interface, 翻译为命令行界面我们可以通过CLI选择项目的配置和创建出我们的项目Vue CLI已经内置了webpack相关的配置我们不需要从零来配置
1.1Vue CLI 安装和使用
安装Vue CLI:
我们是进行全局安装这样在任何时候都可以通过vue的命令来创建项目: npm install vue/cli -g
升级Vue CLI
如果是比较旧的版本可以通过下面的命令来升级:npm update vue/cli -g
通过Vue的命令来创建项目:vue create 项目的名称
1.2vue create 项目的过程 1.3项目的目录结构 1.4Vue CLI的运行原理 2.认识Vite
Webpack是目前整个前端使用最多的构建工具但是除了webpack之后也有其他的一些构建工具比如rollup、parcel、gulp、vite等等什么是vite呢 官方的定位下一代前端开发与构建工具
如何定义下一代开发和构建工具呢
我们知道在实际开发中我们编写的代码往往是不能被浏览器直接识别的比如ES6、TypeScript、Vue文件等所以我们必须通过构建工具来对代码进行转换、编译类似的工具有webpack、rollup、parcel但是随着项目越来越大需要处理的JavaScript呈指数级增长模块越来越多构建工具需要很长的时间才能开启服务器HMR也需要几秒钟才能在浏览器反应出来所以也有这样的说法天下苦webpack久矣
Vite (法语意为 快速的发音 /vit/) 是一种新型前端构建工具能够显著提升前端开发体验。
2.1Vite的构造
它主要由两部分组成
一个开发服务器它基于原生ES模块提供了丰富的内建功能HMR的速度非常快速一套构建指令它使用rollup打开我们的代码并且它是预配置的可以输出生成环境的优化过的静态资源
目前是否要大力学习vitevite的未来是怎么样的
我个人非常看好vite的未来也希望它可以有更好的发展但是目前vite虽然已经更新到2.0依然并不算非常的稳定并且比较少大型项目或框架使用vite来进行构建vite的整个社区插件等支持也还不够完善包括vue脚手架本身目前也还没有打算迁移到vite而依然使用webpack虽然后期一定是有这个打算的所以vite看起来非常的火热在面试也可能会问到但是实际项目中应用的还比较少
2.2浏览器原生支持模块化 但是如果我们不借助于其他工具直接使用ES Module来开发有什么问题呢
首先我们会发现在使用loadash时加载了上百个模块的js代码对于浏览器发送请求是巨大的消耗其次我们的代码中如果有TypeScript、less、vue等代码时浏览器并不能直接识别
事实上vite就帮助我们解决了上面的所有问题。
2.3Vite的安装和使用
注意Vite本身也是依赖Node的所以也需要安装好Node环境,并且Vite要求Node版本是大于12版本的
首先我们安装一下vite工具: 通过vite来启动项目npx vite
2.4Vite对css的支持
vite可以直接支持css的处理:直接导入css即可
vite可以直接支持css预处理器比如less:
直接导入less之后安装less编译器npm install less -D
vite直接支持postcss的转换
只需要安装postcss并且配置 postcss.config.js 的配置文件即可:npm install postcss postcss-preset-env -D 2.5Vite对TypeScript的支持
vite对TypeScript是原生支持的它会直接使用ESBuild来完成编译只需要直接导入即可
如果我们查看浏览器中的请求会发现请求的依然是ts的代码
这是因为vite中的服务器Connect会对我们的请求进行转发获取ts编译后的代码给浏览器返回浏览器可以直接进行解析
注意在vite2中已经不再使用Koa了而是使用Connect来搭建的服务器 2.6Vite对vue的支持
vite对vue提供第一优先级支持
Vue 3 单文件组件支持vitejs/plugin-vueVue 3 JSX 支持vitejs/plugin-vue-jsxVue 2 支持underfin/vite-plugin-vue2
安装支持vue的插件npm install vitejs/plugin-vue -D
在vite.config.js中配置插件 2.7Vite打包项目
我们可以直接通过vite build来完成对当前项目的打包工具npx vite build 我们可以通过preview的方式开启一个本地服务来预览打包后的效果npx vite preview
3.ESBuild解析
ESBuild的特点
超快的构建速度并且不需要缓存支持ES6和CommonJS的模块化支持ES6的Tree Shaking支持Go、JavaScript的API支持TypeScript、JSX等语法编译支持SourceMap支持代码压缩支持扩展其他插件;
3.1ESBuild的构建速度
ESBuild的构建速度和其他构建工具速度对比 ESBuild为什么这么快呢
使用Go语言编写的可以直接转换成机器代码而无需经过字节码ESBuild可以充分利用CPU的多内核尽可能让它们饱和运行ESBuild的所有内容都是从零开始编写的而不是使用第三方所以从一开始就可以考虑各种性能问题
4.Vite脚手架工具
在开发中我们不可能所有的项目都使用vite从零去搭建比如一个react项目、Vue项目;这个时候vite还给我们提供了对应的脚手架工具
所以Vite实际上是有两个工具的
vite相当于是一个构件工具类似于webpack、rollupvitejs/create-app类似vue-cli、create-react-app
如果使用脚手架工具呢npm init vitejs/app
上面的做法相当于省略了安装脚手架的过程
