vue-cli-plugin-busy
Vue CLI 的一个第三方插件,专用于初始化零食很忙前端相关的 vue 2/3 项目,方便统一维护和更新常用代码。
提供的功能
- 自动预置常用的代码,比如 api 常量,网络请求等;
- 添加默认的 eslint 配置;
- 构建项目目录;
- qinkun 微应用项目初始化配置;
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 默认未选中
- 在项目根目录生成
postcss.config.js
。 - 下载对应的开发依赖
'postcss-px-to-viewport': '^1.1.1'
busyMicroApp 默认未选中
当项目作为 qinkun 微应用时的相关qinkun
官网提供的配置:src/initMicroApp.js
vueVersion 选择当前项目使用的 vue 版本
- 默认选择的是
vue2+
。 - 根据现在的版本生成对应的基础代码
预置代码说明
.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 服务器