Vue3.x+Vite+Pinia 搭建工程化项目模板
背景
21年4月开始，在历时近7个月时间后，完成对公司内老板企业管理后台的Vue3重构之后，考虑到以后可能需要再次重构其他管理后台或运营后台，抽时间对现有的新版企业管理后台进行一次梳理，和过程中踩坑的归纳，决定记录一下从0到1实现一个基于Vue3.x、Vite、Pinia的工程化项目模板
初始化项目
在本地的文件夹内运行yarn create vite初始化项目，依次按提示键入命令后，使用yarn & yarn dev完成安装依赖和项目运行，至此，一个初始化的Vite+Vue3.x的项目便可以运行了，此时的package.json文件内容如下：
{
"name": "manager-vite-vue3-temp",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.2.0",
"vite": "^2.8.0"
}
}
目录配置
在完成项目初始化之后，便可以着手去做项目的各种配置以及安装一些插件和依赖等，一个完整的工程化项目需要一个相对整齐的目录，在开始之前需要合理的规划好一些目录
仅以个人工程项目为例，命名方式各有千秋，仅做参考
| public **** 模板文件目录
| src
| assets **** 静态资源目录
| components **** 公共组件目录
| pages **** 页面组件目录
| router **** 路由配置目录
| services **** 接口配置目录
| store **** 状态管理配置目录
| utils **** 工具方法目录
| App.vue **** 根组件
| main.js **** 主文件
| * **** 一些配置文件
状态管理 Pinia ^2.0.11
Pinia 是 Vue.js 的轻量级状态管理库，最近很受欢迎。它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库，且在经过重构老项目之后，Pinia2.x 搭配 Vue3.x个人觉得更配哦～毕竟一个全新的工程项目框架，还是尽力尝试新技术吧～