Vite + Vue3 实现前端项目工程化

Vue3 发布至今，周边的生态、技术方案已足够成熟，个人认为新项目是时候切换到 Vite + Vue3 了。今天就给大家操作一下这种技术方案实现前端工程化。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客

1. 初始化项目

通过官方脚手架初始化项目

• 第一种方式，这是使用vite命令创建，这种方式除了可以创建vue项目，还可以创建其他类型的项目，比如react项目

  npm init vite@latest
  

• 第二种方式，这种方式是vite专门为vue做的配置，这种方式创建的项目在创建时会提示是否需要安装各种插件配置

  npm init vue@latest
  

• 第三种方式，直接快速通过参数生成

  npm init vite@latest project-engineer --template vue-ts
  

询问的相关问题：

Project name: … // 项目名称，默认值：vue-project，可输入想要的项目名称，此处不建议中文。
Add TypeScript? … No / Yes // 是否加入TypeScript组件？
Add JSX Support? … No / Yes // 是否加入JSX支持？
Add Vue Router for Single Page Application development? … No / Yes // 是否为单页应用程序开发添加Vue Router路由管理组件？
Add Pinia for state management? … No / Yes // 是否添加Pinia组件来进行状态管理？
Add Vitest for Unit Testing? … No / Yes // 是否添加Vitest来进行单元测试？
Add an End-to-End Testing Solution? » No // 是否添加一个端到端测试解决方案?
Add ESLint for code quality? … No / Yes // 是否添加ESLint来进行代码质量检查？
Add Prettier for code formatting? … No / Yes // 是否添加Prettier代码格式化?

执行结束后进入项目目录，安装依赖后执行 npm run dev 即可秒开项目

命令行演示操作

生成的项目目录如下：

但此项目目录不足以支持项目的复杂度，因此对目录结构进行扩展如下：

2. 定制化 plugins

在初始化的项目中 vite.config.js 只是引入了提供 Vue 3 单文件组件支持的 plugin，大家可以根据项目需要进行个性化配置，详见 awesome-vite。

2.1 @vitejs/plugin-vue-js