vue-cli-plugin-busy

Vue CLI 的一个第三方插件，专用于初始化零食很忙前端相关的 vue 2/3 项目，方便统一维护和更新常用代码。

提供的功能

• 自动预置常用的代码，比如 api 常量，网络请求等；
• 添加默认的 eslint 配置；
• 构建项目目录；
• qinkun 微应用项目初始化配置;

CHANGELOG

quick-start

第一步在本地配置好预置配置

通过预置preset配置，在创建工程时选择 busy 相关的预置(推荐)：

只要运行过vue create命令，就会在操作系统的用户文件夹下生成.vuerc文件，(~/.vuerc)，比如 windows 下通过下面的命令显示此目录：

cd ~
pwd

/c/Users/Administrator

将下面配置信息合并进~/.vuerc文件，之后再使用vue create your_app_name，根据提示选择busy-front-vue2或busy-front-vue3就会自动按照 预设来生成项目。

{
  "useTaobaoRegistry": false,
  "packageManager": "npm",
  "presets": {
    "busy-front-vue2": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "airbnb"
        }
      },
      "router": true,
      "vuex": true,
      "cssPreprocessor": "sass",
      "vueVersion": "2"
    },
    "busy-front-vue3": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "airbnb"
        }
      },
      "router": true,
      "vuex": true,
      "cssPreprocessor": "sass",
      "vueVersion": "3"
    }
  }
}

第二步下载和使用插件

# 使用 npm 包管理的方式下载
npm install -D -d vue-cli-plugin-busy

# 使用 yarn 包管理的方式下载
yarn add -D vue-cli-plugin-busy

# 使用 vue-cli-plugin-busy 插件来选择要生成的工程化代码
vue invoke vue-cli-plugin-busy

preset 说明

Vue CLI 在初始化一个项目的时候，可以提供一个预置选项，vue 会根据这个预置选项提供的配置生成项目，免去在创建的时候，反复选择需要的功能。

preset 的具体信息，可以参考这里。在插件的根目录下有一个preset.json文件

{
  "useTaobaoRegistry": false,
  "packageManager": "npm",
  "presets": {
    "busy-front-vue2": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "airbnb"
        }
      },
      "router": true,
      "vuex": true,
      "cssPreprocessor": "sass",
      "vueVersion": "2"
    },
    "busy-front-vue3": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "airbnb"
        }
      },
      "router": true,
      "vuex": true,
      "cssPreprocessor": "sass",
      "vueVersion": "3"
    }
  }
}

preset.json配置项说明:

• [x] 使用独立的配置文件，而不是把配置信息放到package.json里。如 vue 的配置文件，就放在项目根目录下的vue.config.js文件里，eslint 的配置文件，就放在项目根目录下的.eslintrc.js文件里；
• [x] 安装 babel；
• [x] 安装 eslint，同时使用 airbnb 提供的默认 eslint 配置，并且在每次提交 commit 的时候，会自动跑 eslint，如果 eslint 没过，则无法提交 commit；
• [x] 安装 vue-cli-plugin-busy ，新版的 vue-cli 的 preset 已经支持直接内置第三方插件；
• [x] 安装 vue-router；
• [x] 安装 vuex；
• [x] 使用 sass 作为 css 的预处理器；
• [x] 可以选择项目要使用的 vue 版本

可选的预置代码

• 为了统一开发环境，插件会往项目里注入一些默认的代码，以及扩展 webpack 的配置
• 预置代码全放在了generator文件夹下面
• 默认注入的预置代码，在generator/template下面
• 扩展 webpack 的代码在 index.js 里面

constants 默认选中

常量，在src下面创建一个constants文件夹，用于放置不变的数据。会在src下面创建这么一个目录结构:

.
├── constants
│   ├── url
│       ├── api
│           ├── basic.js
│       ├── index.js

这里默认的预置代码，都和接口有关。src/constants/url/index.js里会暴露一个 B_URL.API_BASE_URL 变量，以及 api 下面配置的接口。

在 webpack 的 ProvidePlugin 插件里已经配置了一个公共变量，B_URL，指向src/constants/url/index.js，该变量已经在.eslintrc.js里配置成了公共变量。

services 默认选中

网络请求，使用 axios。services 依赖 B_URL，所以要正常使用 services，必须选中 constants

xss 默认未选中

跨站脚本攻击过滤，主要用于显示富文本，比如笔记打印，笔记分享，任务打印等等地方，需要在显示富文本之前，先进行过滤。 该预置代码，会往 vue 里注入一个过滤器，xss

i18n 默认未选中

用于 vue 项目的国际化（vue-i18n），会在项目目录下的src创建一个如下的目录结构

├── i18n
│   ├── languages
│       ├── cn(中文的语言包)
│           ├── common.js
│           ├── todo.js
│       ├── en(英文的语言包)
│           ├── common.js
│           ├── todo.js
│   ├── demo.vue
│   ├── index.js

1.语言包里面的 js 文件里的内容就是针对不同组件的数据（可根据项目需要手动配置自己的语言包） 2.使用方法可参考：demo.vue 里面的代码（更多的使用请参考官文：http://kazupon.github.io/vue-i18n/guide/started.html）

注意: 目前此功能默认本地语言为 cn，如需修改可在i18n 目录下的index.js里设置。

initH5Config 默认未选中

1. 在项目根目录生成 postcss.config.js。
2. 下载对应的开发依赖 'postcss-px-to-viewport': '^1.1.1'

busyMicroApp 默认未选中

当项目作为 qinkun 微应用时的相关qinkun官网提供的配置：src/initMicroApp.js

vueVersion 选择当前项目使用的 vue 版本

1. 默认选择的是 vue2+。
2. 根据现在的版本生成对应的基础代码

预置代码说明

.editorconfig

编辑器配置文件，用于简单配置一些代码格式: 缩进用两个空格, 文件末尾留一个空行等 主流编辑器均支持 editorconfig

.env.*

在 vue invoke vue-cli-plugin-busy 完成之后，会在项目的根目录下面，生成三个.env.开头的文件，分别是:

• .env.local
• .env.test
• .env.production

用于放置环境变量。.env.local 是默认被.gitignore忽略了的

其他配置

项目地址前缀

配置一个统一的项目地址前缀，默认是/test 配置之后，会存放到.env.local里，后面可自己修改

项目调试端口

调试端口，默认是3001 配置之后，会存放到.env.local里，后面可自己修改

项目上线时的域名

打包发布包时用到的域名，默认是busy-front-cdn.timetask.cn 配置之后，.env.test 和.env.production 里，后面可自己修改

webpack 扩展

使用 Vue CLI 3 搭建项目，有一个非常棒的体验，就是项目目录下的代码，几乎不会看到复杂的 webpack 配置，大部分的 webpack 配置都放到了@vue/cli-service里面去了。Vue CLI 3 提供的插件机制，可以在插件里扩展 webpack 的配置，可以把一些常用的配置都放到插件里，在多个项目之间复用非常方便。

vue.config.js文件里，有一个选项叫pluginOptions，这个选项里可以配置一些插件需要的配置项。该插件会读取pluginOptions.busy下面的配置作为配置项

pluginOptions.busy.provide

用于定义可自动引入的全局变量

{
  "B_URL": true
}

这个配置项，现在就一个可选值, B_URL，为 true，为 false，都一样

如果配置了 B_URL，在 webpack 的 ProvidePlugin 插件里，会把B_URL指向@/constants/url，这样在其他地方使用B_URL即可方便接口相关的配置

pluginOptions.busy.define

这个也是定义全局变量，和 provide 不同的是，使用在 define 里定义的变量，在代码构建的时候，会把变量替换成值

{
  __DEV__: process.env.NODE_ENV === 'development'
}

在使用的地方:

if (__DEV__) {
  // development环境才执行的代码
}

在构建的时候，如果process.env.NODE_ENV是development，会被构建成

if (true) {
  // development环境才执行的代码
}

如果process.env.NODE_ENV不是development，会被构建成

if (false) {
  // development环境才执行的代码
}

pluginOptions.busy.define里的配置项可自由配置，默认提供了__DEV__

需要注意： 如果在 pluginOptions.busy.define 加了新的配置，需要在.eslintrc.js文件里把新配置定义为一个全局变量，不然 lint 的时候会报错

默认的 eslint 配置

我们采用了airbnb的 js 规范，然后再根据项目情况，自定义了一些

• no-console，提交的代码不能写 console，调试的时候可以用
• no-param-reassign，不能对传入函数的参数进行赋值，也不能对传入函数的 object 类型的参数的属性进行赋值。不过可以指定一些参数名，被指定的参数，就可以对它的属性进行修改。现在就指定了一个error
• comma-dangle，需要写尾部逗号，防止无意义的 git diff. https://eslint.org/docs/rules/comma-dangle.html
• semi, 不用写分号，但是需要注意，如果某一行开头是 [, (, /, +, - ，这几个字符其中一个，那么上一行必须有分号

• 'import/prefer-default-export': 'off',文件导出的时不指定 default，将不会报错

eslint 的自动修复功能

上面提到的 comma-dangle 和 semi，在npm run lint的时候，都能自动修复

需要注意： 有一些 eslint 的规则，可能需要在开发过程中调整，请及时反馈，方便统一加到 eslint 配置文件

注意提交自己修改的代码

vue invoke vue-cli-plugin-busy会修改工程下面的文件，为了明确在执行命令之后，都修改了哪些文件，最好是在执行之前，先git add .，把本地修改的代码先放到暂存区

插件中内置的一些方法的使用方式：（方法的源码在插件源码目录的 lib 文件中）

因为在预置的 webpack 中已经通过配置项 Resolve.alias 来为 lib 文件设置别名，关于方法的用法如下：

import client from "busy/client"; //比如需要使用lib中检测客户端的client，只需引用 client

并且插件已经通过 vue.config.js 的 transpileDependencies: ["vue-cli-plugin-busy"]//将 lib 文件夹下的代码进行 babel 转化，所以内置的方法中的一些高级语法已经经过 babel 的处理

推荐的项目目录结构

.
├── public                                 # 放置 index.html，以及可以直接在index.html里引用的文件
│   ├── index.html                         # 入口html
├── src                                    # 源代码
│   ├── assets                             # 静态资源文件，如图片和字体
│       ├── images                         # 图片                         # 字体文件
│   ├── components                         # 公共组件
│   ├── constants                          # 常量，如URL,第三方配置
│   ├── i18n                               # 项目国际化
│       ├── languages                      # 语言包
│       ├── demo.vue                       # 模板
│       ├── index.js                       # vue-i18n的使用需要的配置
│   ├── lib                                # 放置自开发的基础库，如filter，日期处理方法，可随处移植的
│       ├── filter                         # 过滤器
│   ├── routers                            # 路由，如果路由配置很简单，则可以使用一个文件，如果复杂，则必须放到文件夹下面分模块管理
│   ├── services                           # 网络请求层，所有的接口请求代码，都放到这里
│   ├── store                              # vuex
│   ├── styles                             # 公共的样式文件，这里不写组件的样式文件，因为组件的样式文件都写到对应的.vue文件里
│   ├── utils                              # 放置和项目息息相关的基础代码，如request.js
│   ├── views                              # 视图层，页面
│   ├── App.vue                            # vue入口组件
│   ├── main.js                            # 项目的入口文件
│   ├── iniMicroApp.js                     # qinkun微应用入口代码
├── Dockerfile                             # 项目使用 Docker 容器发布时的 Dockerfile 用于生成对应的镜像
├── nginx-default.conf                     # 项目的 nginx 配置文件，用于 Dockerfile 生成一个 web 服务镜像
├── busy-dev-account.json                  # 配置调试账户、WEB 服务器