vue-cli-plugin-xuwu

通过命令行的方式初始化项目模版，从而完成项目的基础配置

Usage no npm install needed!

<script type="module">
  import vueCliPluginXuwu from 'https://cdn.skypack.dev/vue-cli-plugin-xuwu';
</script>

README

vue-cli插件xuwu(虚无)模板助手

虚无模版库是通过命令快速的完善项目基建。将所有项目公共的部分进行抽离。最终包括6个基础功能。其中涵盖了eslint配置，自动格式化代码，请求封装，移动端适配，环境变量扩展，按需引入各种ui库，生产环境去掉console等相关功能

项目支持列表

  1. vite-uniapp-vue3
  2. vite-web-vue3
  3. webpack-uniapp-vue2
  4. webpack-web-vue2
  5. webpack-web-vue3

目的

xuwu模板助手是一款自由开放的vue插件，通过插件的方式对vue生态圈的所有项目进行高效，便捷的扩展。从源头上降低因各种原因导致基础建设的不完整。从而提高团队项目结构的和代码风格的一致性。因插件针对的是所有vue相关生态圈，所以不会内嵌任何相关脚手架，只是在创建完成后对项目进行完善补充。

使用场景

提示：
适用于vue相关的所有新老项目，可多次安装且不会覆盖掉之前的配置
内部会自动适配js/ts，vite/webpack, vue2/vue3

  • vue-cli创建的web项目（pc和移动端）
  • uniapp创建的项目

安装教程

1、第一步，先使用vue-cli创建一个新的工程
2、在创建的工程中执行:vue add xuwu

1.选择自己的语言，目前可以选择vue-cli和uniapp两种

Alt

2.选择项目的使用场景，可以选择pc端还是移动端

Alt

3.选择推荐的功能还是自定义选择。

Alt

4. 自定义选择包括全部的功能选项

Alt

5. 请选择要使用的ui库，目前移动端默认使用vant，pc端默认使用element

Alt

地址

git地址：https://github.com/wsrh8888/vue-cli-plugin-xuwu.git

功能介绍

xuwu模板助手在安装时一直秉持着自由的原则，所有的功能均可以选择性的安装，也可以使用作者推荐的功能进行安装，目前xuwu模板助手在web项目方向完成了6个基础功能的封装，2个UI框架的封装，在uniapp方向完成了4个基础功能的开发，总共涉及了16个页面。

vue-cli

  1. 扩展环境变量

默认情况下分为development和production两种开发环境，日常工作中我们可能会分为更多的环境，比如开发环境，测试，预发布环境，线上环境等等一些列环境，插件内新增加了API_ENV属性，用于满足日常需求。插件内的很多功能都会用到API_ENV这个属性。

  1. ajax请求模板

帮助大家封装好了一个公共的ajax请求模块，web项目使用axios库，uniapp使用官方提供的方法。所有的请求内置了域名配置文件和扩展环境变量。同时也为大家提供了一个demo。

  1. commit代码时统一风格

利用prettier和eslint对整个工程制定了一套标准的规则，每次在commit代码时候都会进行eslint的校验。如果prettier可以自动修复的则直接提交到仓库中，否则需要自己手动修改，再次进行尝试。这个功能解决了一个根本问题，可能有些小伙伴电脑上有代码格式化工具，每次修改别人写的某个文件，他的结构就会全部改变。结果就是整个代码都是自己的名字，或者别人拉取代码时候就会有冲突。

很多人都会嫌这个功能太麻烦了，因为每次修改可能会有一堆的eslint报错，导致不愿意使用这个功能。在这里提一个开发小窍门，开2个命令行窗口，一个专门启动该项目。一个随时运行 npm run lint，随时格式化并修复代码。

  1. 生产环境去掉console

在日常开发中经常用到console来找bug或者调试一些信息。该功能的目的就是在线上环境时候去掉console的所有信息，从而提高安全性。

  1. 移动端consoleLog控制台

移动端环境下在开发环境下查看控制台特别的麻烦，对于一些日志信息也很难看到，因此为大家提供了consoleLog控制台的插件，方便查找一些问题。该功能做了边界处理，只有在非上线环境才生效

  1. 移动端适配插件

移动端环境根据不同设备屏幕进行尺寸的适配，并且自动将px转为rem。

  1. Vant/Element Ui库

UI库在移动端默认使用Vant在pc端默认使用Element。均通过按需引入的方式引入。

uniapp

  1. 扩展环境变量

  2. ajax请求模板

  3. commit代码时统一风格

  4. sass依赖

uniapp官方推荐使用sass来解析样式。

其他内部小功能

  1. 扩展打包命令，打包后可以分析各个模块的体积

  2. 兼容低版本浏览器

更新记录

点击查看更新记录

展望未来

插件内部会陆续扩展一些其他功能，敬请期待

联系方式

扫码加入QQ群

Alt