标签:npm vue 浏览器 install 使用 postcss vite
原生里使用 ES6模块化导入
- 目前google浏览器, 已经支持了 export 和 import导入和导出了
但是有一个缺点:
-
某些文件是不识别的 (.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
vite处理postcss;
-
只需要安装postcss,并且配置 postcss.config.js 的配置文件即可;
-
npm install postcss postcss-preset-env -D
vite处理 TypeScript
vite对TypeScript是原生支持的,它会直接使用ESBuild来完成编译:
- 只需要直接导入即可;
如果我们查看浏览器中的请求,会发现请求的依然是ts的代码:
-
这是因为vite中的服务器Connect会对我们的请求进行转发;
-
获取ts编译后的代码,给浏览器返回,浏览器可以直接进行解析;
注意:在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中配置插件:
报错缺少插件
因为 .vue文件 需要依赖这个插件来编译template标签
- npm install @vue/compiler-sfc -D
vite原理:
-
vite1: 使用的是 koa
-
vite2: 使用的是 Connext; Connext更加是个转发
请求服务器 --> 获取自己的代码 --> Connext拦截 -->vite工具处理成 es6.js代码---> Connext转发--->发送给浏览器
标签:npm,vue,浏览器,install,使用,postcss,vite 来源: https://www.cnblogs.com/cl1998/p/15311813.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。