vite
Vite下一代的前端工具链 ,为开发提供极速响应。
Vite(法语意为 “快速的”,发音 /vit/,发音同 “veet”)是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:
- 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
- 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。
根据 vite 官网的介绍,我们需要把握两个重点,一个是 esbuild,另一个就是 Rollup。
创建项目
执行命令,选择自定义配置。
1 | npm create vite@latest |
为了搭建一个通用型的 vue 项目,我们需要勾选的项目包括:
- TypeScript
- JSX
- Vue Router
- Pinia
- ESLint
- Prettier
其他选项可以根据需求添加。
下载完成之后,项目的目录结构如下:
安装依赖。
1 | npm install |
启动本地服务。
1 | npm run dev |
项目打包,生成文件到 dist 目录。
1 | npm run build |
查看 scripts , 发现 “build” 命令执行 “run-p type-check build-only”。
“run-p” 是包 “npm-run-all”,提供的命令,代表并行执行后面的命令。另外”run -s”,代表串行执行命令。
1 | "scripts": { |
项目启动成功之后,查看终端,访问 http://127.0.0.1:5173/。
插件使用
除了官方提供的插件,vite 社区还提供了很多优秀的插件 社区插件地址。
CSS 预处理器
Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持
1 | .scss and .sass |
自动引入 api
安装依赖
1 | npm i -D unplugin-auto-import |
配置 node 环境的 tsconfig 和 types。
1 | npm add -D @tsconfig/node18 @types/node@18 |
修改 vite.config.ts
1 | // vite.config.ts |
现在 unplugin-auto-import 会帮我们自动在根目录下生成一个 auto-imports.d.ts 文件,该文件包含的是我们配置 vue、vue-rouetr、pinia 里面一些 api 的 ts 类型声明。
修改根目录下的 tsconfig.app.json 文件,在 include 里面新增 “auto-imports.d.ts”。
1 | { |
进入 src/components/HelloWorld.vue , 修改代码做测试。
如图所示:
插件自动帮助我们引入了 “ref” 方法,类似的其他在 vue、vue-router、pinia 中的 api 都会自动引入,前提是它在 auto-imports.d.ts 文件中已声明。
自动引入组件
安装依赖
1 | npm i unplugin-vue-components -D |
配置插件
1 | // vite.config.ts |
项目自动引入 src/components 目录下的组件,我们删除相关代码,依旧正常运行。
自动生成路由
安装依赖
1 | npm install -D vite-plugin-pages |
插件根据文件目录自动生成路由,我们来修改路由配置
1 | // router/index.ts |
在 src 下面新建 pages 文件,然后把原来在 views 里面的组件移动到里面,具体如下
ps:在 pages 目录里面新建 […all].vue 文件代表匹配 404 路径的路由页面。
添加到 vite.config.ts
1 | // vite.config.ts |
添加类型到 vite-env.d.ts
1 | // vite-env.d.ts |
最后页面生成的路由如下:
- “/“ : “pages/index.vue”
- “/about” : “pages/about/index.vue”
webpack 迁移指南
加载资源文件
1 | import imgUrl from './img.png' |
启动模式
通过设置 –mode dev,可以读取 .env.dev 的配置
将 VUE_APP_ 的前缀改为 VITE_,这样才能暴露给 vite
1 | // .env.dev |
1 | // 获取启动模式 |
具体配置请参考 模式
获取配置
1 | console.log(import.meta.env.VITE_SOME_KEY) // 123 |
vite 本地服务使用 es module,无法加载 commonjs 模块,需要安装插件处理
1 | npm i vite-plugin-commonjs -D |
添加到 vite.config.ts
1 | // vite.config.ts |
使用 antd vue
安装
1 | npm install ant-design-vue@4.x --save |
自动按需引入组件
1 | // vite.comfig.ts |