ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vite的使用

2021-09-19 15:35:45  阅读:994  来源: 互联网

标签:npm vue 浏览器 install 使用 postcss vite


原生里使用 ES6模块化导入

  • 目前google浏览器, 已经支持了 export 和 import导入和导出了

image

image

但是有一个缺点:

  • 某些文件是不识别的 (.ts, .vue, .less, .jsx)

  • 如果包之间依赖太多, 那么会发送过多的网络请求;

这些缺点可以通过 vite来解决

vite

vite安装

  • npm install vite –g # 全局安装

  • npm install vite –D # 局部安装

  • 局部安装启动命令:

  • npx vite

vite处理css , sass , postcss的转换

vite可以直接支持css的处理

vite处理sass

  • npm install sass -D

image

vite处理postcss;

  • 只需要安装postcss,并且配置 postcss.config.js 的配置文件即可;

  • npm install postcss postcss-preset-env -D

image

vite处理 TypeScript

vite对TypeScript是原生支持的,它会直接使用ESBuild来完成编译:

  • 只需要直接导入即可;

如果我们查看浏览器中的请求,会发现请求的依然是ts的代码:

  • 这是因为vite中的服务器Connect会对我们的请求进行转发;

  • 获取ts编译后的代码,给浏览器返回,浏览器可以直接进行解析;

image

注意:在vite2中,已经不再使用Koa了,而是使用Connect来搭建的服务器

vite处理 vue

先安装vue

  • npm install vue@next

vite对vue提供第一优先级支持:

  • Vue 3 单文件组件支持:@vitejs/plugin-vue

  • Vue 3 JSX 支持:@vitejs/plugin-vue-jsx

  • Vue 2 支持:underfin/vite-plugin-vue2

安装支持vue的插件:

  • npm install @vitejs/plugin-vue -D
在vite.config.js中配置插件:

image

报错缺少插件

因为 .vue文件 需要依赖这个插件来编译template标签

image

  • npm install @vue/compiler-sfc -D

image

vite原理:

  • vite1: 使用的是 koa

  • vite2: 使用的是 Connext; Connext更加是个转发

请求服务器 --> 获取自己的代码 --> Connext拦截 -->vite工具处理成 es6.js代码---> Connext转发--->发送给浏览器

image

标签:npm,vue,浏览器,install,使用,postcss,vite
来源: https://www.cnblogs.com/cl1998/p/15311813.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有