1 前言
小伙伴们在日常工作时候是否疑惑过一个新的项目需要哪些基础的能力来填充呢?或者有没有抱怨过公司的每个vue项目连最基本的启动命令都不一样?或者每个项目都在不停的查一些配置,xuwu插件就是为了解决这个烦恼而诞生的。xuwu插件可以通过命令行的方式快速高效的构建一个又一个新的应用。
2 Xuwu 简介
xuwu插件是一款基础vue-cli的插件开发的快速完善项目模板,通过命令行的方式动态的添加项目的基础能力。
3 支持语言
功能 | webpack-web-vue2 | webpack-web-vue3 | webpack-uniapp-vue2 | webpack-uniapp-vue3 | vite2-web-vue3 | vite3-web-vue3 |
---|---|---|---|---|---|---|
ajax请求 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
扩展环境变量 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
去掉console | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
统一代码风格 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
consoleLog控制台 | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
移动端适配 | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
SVG解析 | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
打包体积分析 | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
pinia | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
ES6为ES5 | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
Element | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
Vant | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
file工具库 | ✅ | ✅ | ❌ | ❌ | ✅ | ✅ |
4 使用说明
xuwu模板必须是基于脚手架(vue-cli/vite-cli/uniapp-cli)创建好的工程的基础上使用的。
4.1 环境安装
全局安装vue-cli
npm install -g @vue/cli
4.2 创建工程
可以使用vue-cli或vite-cli或uniapp创建一个工程
4.3 使用xuwu插件
vue add xuwu
安装完成后,会有选项切换
4.4 使用场景
此时,会提示选择使用的场景是pc端或者是移动端(使用uniapp版不会提示),如下所示:
4.5 功能模式
选择完场景后,会提示让选择默认推荐的配置或自定义功能配置,如下所示:
4.6 自定义选择功能
当选择Manually select features后,就可以自定义选择需要的功能了(默认配置不会提示),如下所示:
5 仓库地址
https://github.com/wsrh8888/vue-cli-plugin-xuwu
6 未来规划
6.1 平台扩展
- uniapp-vite的支持
- nuxt的支持
6.2 功能扩展
- 国际化支持
- 换肤能力支持
结尾
欢迎大家是体验xuwu插件,有任何问题或者建议可以在评论区和我沟通,我将第一时间反馈。