2021必知必会的vite+vue3项目最佳实践

2021学什么

2021第一更是尤大的Vite2，全新插件架构，丝滑的开发体验，和Vue3的完美结合。 2021年第一弹，村长将以Vite2+Vue3为主题开启大家的前端学习之旅。

“我自己是一名从事了6年web前端开发的老程序员（我的微信：webxxq），今年年初我花了一个月整理了一份最适合2021年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“web”即可领取）。

本文目标

vue3+vite2项目中常见任务实践：

• 基建：配置、lint、测试、样式组织、服务封装、数据mock、UI库整合、路由、状态管理等
• 常见业务编写和代码组织
• 打包发布

创建Vite2项目

闲言碎语不必说，下面我们表一表好汉vite2

使用npm:

$ npm init @vitejs/app
复制代码

按提示指定项目名称和模板，或直接指定

$ npm init @vitejs/app my-vue-app --template vue
复制代码

Vite2主要变化

• 配置选项变化：vue特有选项、创建选项、css选项、jsx选项等、别名行为变化：不再要求/开头或结尾
• Vue支持：通过 @vitejs/plugin-vue插件支持
• React支持
• HMR API变化
• 清单格式变化
• 插件API重新设计

Vue支持

Vue的整合也通过插件实现，和其他框架一视同仁：

SFC定义默认使用setup script，语法比较激进，但更简洁，好评！

别名定义

不再需要像vite1一样在别名前后加上/，这和webpack项目配置可以保持一致便于移植，好评！

import path from 'path'

export default {
  alias: {
    "@": path.resolve(__dirname, "src"),
    "comps": path.resolve(__dirname, "src/components"),
  },
}
复制代码

App.vue里面用一下试试

<script setup>
import HelloWorld from 'comps/HelloWorld.vue'
</script>
复制代码

插件API重新设计

Vite2主要变化在插件体系，这样更标准化、易扩展。Vite2插件API扩展自Rollup插件体系，因此能兼容现存的Rollup插件，编写的Vite插件也可以同时运行于开发和创建，好评！

插件编写我会另开专题讨论，欢迎大家关注我。

Vue3 Jsx支持

vue3中jsx支持需要引入插件：@vitejs/plugin-vue-jsx

$ npm i @vitejs/plugin-vue-jsx -D
复制代码

注册插件，vite.config.js

import vueJsx from "@vitejs/plugin-vue-jsx";

export default {
  plugins: [vue(), vueJsx()],
}
复制代码

用法也有要求，改造一下App.vue

<!-- 1.标记为jsx -->
<script setup lang="jsx">
import { defineComponent } from "vue";
import HelloWorld from "comps/HelloWorld.vue";
import logo from "./assets/logo.png"

// 2.用defineComponent定义组件且要导出
export default defineComponent({
  render: () => (
    <>
      <img alt="Vue logo" src={logo} />
      <HelloWorld msg="Hello Vue 3 + Vite" />
    </>
  ),
});
</script>
复制代码

Mock插件应用

之前给大家介绍的vite-plugin-mock已经重构支持了Vite2。

安装插件

npm i mockjs -S
复制代码

npm i vite-plugin-mock cross-env -D
复制代码

配置，vite.config.js

import { viteMockServe } from 'vite-plugin-mock'

export default {
  plugins: [ viteMockServe({ supportTs: false }) ]
}
复制代码