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

这篇具有很好参考价值的文章主要介绍了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 即可秒开项目

命令行演示操作

Vite + Vue3 实现前端项目工程化
生成的项目目录如下：