Vue项目中使用md5进行加密

一、npm（或yarn）安装 js-md5

以下命令均安装js-md5到项目生产环境中

#npm命令
npm install --save js-md5（或 npm install -S js-md5）
#yarn命令
yarn add js-md5

二、在vue项目中引入md5

方式一：在main.js中全局引入

#src/main.js
import md5 from 'js-md5'

Vue.prototype.$md5 = md5

在组件或其他文件中使用

this.$md5(text)  // text为需要加密的文本

方式二：在所需文件中直接引入

import md5 from 'js-md5'
md5(text)  // text为所需加密的文本

注：在mian.js中全局引入可以事先进行如下的自定义封装

在src/文件夹下新建plugins文件夹，并在其中新建md5.js文件，写入如下代码

#src/plugins/md5.js
import md5 from 'js-md5'
 
export default {
  install: function (Vue) {
    Object.defineProperty(Vue.prototype, '$md5', { value: md5 })
  }
}

然后在mian.js中直接引入封装好的md5.js

#src/main.js
import md5 from './plugins/md5'
 
Vue.use(md5)

再在组件或其他文件中调用

this.$md5(text)  // text为所需加密的文本