注意事项

npm安装

npm私服

基于 verdaccio 搭建了npm私有仓库，仓库地址：http://172.25.66.6:4873/ 搭建npm私有仓库目的：方便项目管理，兼容版本控制。仓库使用淘宝镜像加速，会缓存已安装过的依赖包，以后下载直接从缓存加载。建议本地 npm 源切换到公司npm私有仓库，方便统一管理。切换npm私有仓库可直接设置 npm set registry http://172.25.66.6:4873/推荐使用 nrm 来管理npm

npm i nrm -g
nrm add web http://172.25.66.6:4873/
nrm use web
npm i vue-plugin -S
# 更新包
npm update vue-plugin
# 或
npm i vue-plugin@version

vue-plugin

vue-plugin 基于 element-ui 库开发，使用前需引入element-ui组件，重写了element-ui组件中的message方法，防止弹出重复内容的弹窗，保留了其所有原本方法和属性，message的原生方法onClose被征用了，这个方法在重写中被覆盖了。

使用VuePlugin的时候可传入store, router,config三个参数。

store: 可选。传入store后，会自动把公共数据字典注册成全局过滤器，并且会把store.state中已 Filters 结尾属性注册成过滤器。

router: 必传。 http请求返回后异常情况下跳转首页router.replace({path: '/'})

config: 可选。 config.debug 和 config.processEnv 属性缺一不可。会依据环境配置自动绑定基础请求方法到 vue 原型上。

import Vue from 'vue'
import router from './router'
import store from './vuex'
import ElementUI from 'element-ui'
import VuePlugin from 'vue-plugin'

import 'vue-plugin/lib/static/css/theme-red/index.css'  //element-ui组件主题颜色

Vue.use(ElementUI)
//store, config参数可选
Vue.use(VuePlugin, {
    store, router, config: {
        debug: 'VUE_APP_DEBUG_TEST',    //本地连接哪个配置环境，注意环境变量配置必须以 VUE_APP 开头
        processEnv: process.env,         //环境配置
        // component: require.context('./components', true, /\.vue$/),     //自动注册 ./components目录下所有已.vue结尾的组件
        serviceMap: new Map([           //多服务配置,兼容两种写法
            ['/login', 'VUE_APP_LOGIN_API'],
            ['VUE_APP_LOGIN_API', ['/login','/loginOut',]],
        ]),
        project: {
            moduleName: '工作流系统',    //项目名，主要用于获取权限菜单
            service: 'VUE_APP_LOGIN_API',  //接口服务，不传则使用config.debug路径
            jumpLink: '/workflow',      //首页路由地址，用于登录后跳转链接，默认地址： '/home'
            //type: 'system',     //可不传，账号体系,  运营体系：system; 分支机构体系：company ; 第三方服务：common,默认system
            //namespaced: true,   //可不传，是否使用模块命名空间，默认true
            //registerModule: 'login',   //可不传，命名空间name，默认login
        },
    }
})

$vuex数据仓库

关于 vue-plugin 中 $vuex 数据仓库

全局的数据仓库模块，在 install()的时候会自动绑定到 vue 的原型和 window 全局上，在项目中任何地方可直接调用获取数据，使用方法 this.$vuex.getState(name)。暴露三个方法供使用：

getState(name):返回 sotre 参数

dispatch(name, value):更新 store 参数

mergeState(name, value):合并 sotre 参数

全局属性$vuex

关于 vue-plugin 绑定到全局 window 的属性 $vuex

公共组件在注册初会自动绑定一个唯一全局属性 $vuex 到 window 对象上，供在非 .vue 组件文件内使用(.js)。对象属性组成：

$axios(URL, data, config = {}):http post 请求方法

$downFile(URL, data, config = {}):http 下载文件请求方法

$upLoad(URL, data, config = {}):http 上传文件请求方法

$baseMethod(URL, data, config = {}):基础使用方法

$regexList(URL, data, config = {}):公共正则表达式

$state:install() 传入 store 下有效，用于获取 store 对象

router:install() 传入 router 下有效，用于获取 router 对象

processEnv:install() 传入 config.processEnv 下有效，用于获取环境变量

原型方法及属性

关于 vue-plugin 绑定到 Vue.prototype 方法及属性

$axios(URL, data, config = {}):http post 请求方法

$downFile(URL, data, config = {}):http 下载文件请求方法

$upLoad(URL, data, config = {}):http 上传文件请求方法

$baseMethod:基础使用方法

$regexList:公共正则表达式

$vuex:公共数据仓库，详情见上述绑定到 window 的属性 $vuex

$getModuleUrl(moduleName,op):使用 system-menu 组件生效，根据模块名和 op 值查询对应模块的请求地址及权限

$getModuleOpList(moduleName):使用 system-menu 组件生效，根据模块名返回该模块下所有的权限列表

powerList:使用 system-menu 组件生效，使用 Vue.mixin()全局注入权限组件选项,可在项目中直接使用 powerList 属性，属性值为该模块下所有配置的 op 值

$watermark:使用方法：this.$watermark.set('万顺叫车', config)

参数store

关于 Vue.use(VuePlugin，store)中参数 store

传入 store 后，会自动把公共数据字典注册成全局过滤器，并且会把 store.state 中已 Filters 结尾属性注册成过滤器。

注意 store.state 中强行注入的属性不能被 vue-devtools 跟踪，其他使用方法和正常 vuex 使用方法一至。强烈建议在项目中把下拉框值全部写入 vuex，异步值使用 action，方便跟踪，并属性已 Filters 结尾会自动注册成全局过滤器。

bussinessFilters: [
  {id: 200, value: '快车'},
  {id: 400, value: '街坊专车'},
  {id: 600, value: '村村通拼车'},
  {id: 300, value: '出租车'}
]

{{200 | bussinessFilters}} => '快车'
{{[200,300,400] | bussinessFilters}} => '快车,出租车,街坊专车'

参数cofnig

关于 Vue.use(VuePlugin，store,cofnig)中参数 cofnig

config.debug 和 config.processEnv 属性缺一不可。会依据环境配置自动绑定基础请求方法到 vue 原型上。在项目中可直接使用 this.$axios(url ,data).then((res) => {})调用请求方法。

$axios:

基础请求 psot 方法，传入参数会把对象空属性转成 null，如果是对象则转成转成字符串对象,传参不需再用 JSON.stringify()转换。
会自动判断是否 dev 开发模式，接口报错（如：session 过期）需跳转首页的，dev 模式下不跳转首页，线上环境会自动跳转：router.replace({path: '/'})。
接口返回会拦截所有 code !== 1 的情况，项目中只需处理正常返回就行，异常信息可以用 catch 捕获

$upLoad: 同$axios

略

$downFile:

文件下载方法，返回二进制流会自动下载，返回报错信息会自动提示。
实现自动下载前提是服务端要在 header 设置 Access-Control-Expose-Headers: Content-Disposition，前端才能正常获取到 Content-Disposition 内容，
文件名是从 Content-Disposition 中获取，并会对对文件名进行 decodeURIComponent 解密，文件名中带有中文后端必须用 URLEncoder.encode 进行编码
文件类型是从 content-type 中自动获取，拿到 Content-Disposition 和 content-type 后会开始自动下载。
总结：如果传参和 url 没有错误，调用 this.$downFile(url,data)不能下载问题一律出在后台，多为上面第 2，3 条出错。

注意事项 ​

npm安装 ​

$vuex数据仓库 ​

全局属性$vuex ​

原型方法及属性 ​

参数store ​

参数cofnig ​