经常需要构建新项目时,每次安装都非常繁琐。有时由于依赖配置的升级,项目搭建时会遇到各种问题。然而在市场上找到的解决方案要么过时,要么不符合我对UI组件库的要求。此外很多解决方案都是基于Vite构建的,而我一直更喜欢使用CLI脚手架。
因此,我花了些时间整理了一套较新的模板,旨在简化项目搭建过程。这套模板相对纯净,没有集成任何大型UI库,但可以根据个人需求进行灵活集成和使用。我决定将其开放给有需要的同行,并非常欢迎各位提供宝贵的改进意见。
node >14.*
- vue3
- cli4 (vue-cli3版本, 升级命令npm update -g @vue/cli)
- typescript
- axios 接口封装
- pinia 数据状态管理
- js-cookie 用于令牌或者重要数据存储
- eslint 语法检查
- prettier 自动格式化
- less css语法规范
- postcss-pxtorem H5自动适配(已注释,如果是h5项目,放开就行)
为了简化项目的搭建流程,我将常用功能直接集成到模板中。如果您不需要其中某些功能,您可以在安装依赖前直接删除package.json文件中对应的依赖项,然后执行安装命令。
- svg svg图标展示,支持动态更换颜色(重要)
- swiper 轮播图(可选,使用参考:https://swiperjs.com/get-started)
- v-viewer 大图查看器(可选,使用参考:https://mirari.cc/vue3-viewer/)
- vue-clipboard3 文本复制(可选)
- vue-cropper 图片裁剪(可选,使用参考:https://github.com/xyxiao001/vue-cropper)
- vue-toastification taost 组件(可选,项目store中已经集成,更多使用参考:https://github.com/Maronato/vue-toastification)
- svg 预览复制,方便查找图片(已配置测试及生产环境屏蔽,可放心使用)
- 多环境配置 (开发、测试、生产)
- 完整的接口封装功能(支持模块化拆分)
yarn || yarn install || npm install
yarn dev || npm run dev //开发环境
yarn uat || npm run uat //测试环境
yarn prod || npm run prod //生产环境
yarn dev:build || npm run dev:build //开发环境
yarn uat:build || npm run uat:build //测试环境
yarn build || npm run build //生产环境
yarn lint
vue3-cli4-pina-ts
├─ .env.development
├─ .env.production
├─ .env.uat
├─ .eslintrc.js
├─ README.en.md
├─ README.md
├─ babel.config.js
├─ package.json
├─ postcss.config.js
├─ public
│ ├─ favicon.ico
│ └─ index.html
├─ src
│ ├─ App.vue
│ ├─ assets
│ │ ├─ icons
│ │ │ ├─ index.ts
│ │ │ └─ svg
│ │ │ ├─ baocun.svg
│ │ │ ├─ bianji.svg
│ │ │ ├─ booleanbeifen.svg
│ │ │ ├─ fenxiang.svg
│ │ │ ├─ fuzhijiahao.svg
│ │ │ ├─ guanbi.svg
│ │ │ ├─ jiahao.svg
│ │ │ ├─ jiantoushang.svg
│ │ │ ├─ jiantouyou.svg
│ │ │ └─ jiantouzuo.svg
│ │ └─ image
│ ├─ components
│ │ ├─ GlobalHeader
│ │ │ └─ index.vue
│ │ └─ SvgIcon
│ │ └─ index.vue
│ ├─ main.ts
│ ├─ router
│ │ ├─ index.ts
│ │ └─ router.ts
│ ├─ server
│ │ ├─ api.ts
│ │ ├─ index.ts
│ │ └─ modules
│ │ └─ home.ts
│ ├─ shims-vue.d.ts
│ ├─ store
│ │ ├─ index.ts
│ │ └─ modules
│ │ └─ user.ts
│ ├─ style
│ │ └─ index.less
│ └─ views
│ ├─ Detail
│ │ └─ detail.vue
│ ├─ Index
│ │ └─ index.vue
│ ├─ Login
│ │ ├─ login.less
│ │ └─ login.vue
│ └─ SvgPreview
│ └─ SvgPreview.vue
├─ tsconfig.json
├─ vue.config.js
└─ yarn.lock