三、uniApp项目中安装js-md5第三方库

1、确认项目目录中是否有package.json文件

在每个前端项目中，都有 package.json 文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。
当运行npm install命令的时候，会根据package.json文件中的配置自动下载所需的模块，也就是配置项目所需的运行和开发环境。

package.json文件解析图

package.json中最重要的两个字段就是name和version，它们都是必须的，如果没有，就无法正常执行npm install命令。npm规定package.json文件是由名称和版本号作为唯一标识符的。

2、执行npm命令，安装js-md5

npm install --save js-md5

npm install --save js-md5 或者 npm install js-md5 都可以完成js-md5库的安装。
从 npm 5.0.0 开始，已安装的模块默认添加为依赖项，因此不再需要 --save 选项。其他保存选项仍然存在，并在 npm install 的 documentation 中列出。
如果安装太慢，可尝试变更国内镜像源后再尝试安装。

npm config set registry http://registry.npmjs.org/ 
npm install --save js-md5

3、检查js-md5安装结果

检查MD5库安装是否成功

在package.json中检查MD5库依赖是否安装成功

4、测试MD5加密功能

在某个页面中局部引入MD5 库并监测加密结果

5、引入或者挂载MD5方法

（1）、局部引入

import md5 from 'js-md5'
md5('20240215')
// 加密结果：2410baa624e44bf8e6a2b56064ba0403

（2）、全局引入

import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
this.$md5('MD5加密内容')

6、一个基于MD5加密的小案例

首先全局引入md5

在main.js中全局引入md5加密库

<template>
    <view>
        <label for="">加密内容:</label>
        <input type="text" v-model="myValue" placeholder="请输入加密内容"/>
        <button @click="myMD5">输出MD5加密后的内容</button>
        <text>MD5加密前:{{myValue}}</text>
        <hr/>
        <text>MD5加密后:{{md5text}}</text>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                myValue:''  ,//用来存放加密前的value值
                md5text:'' //用来存放加密后的数据
            }
        },
        methods: {
            myMD5(){
                //使用 v-model 双向绑定来获取input表单控件内的值
                const inputValue = this.myValue;
                //
                this.md5text = this.$md5Util(inputValue);
                // 输出到控制台
                console.log('输入值为：' + inputValue);
            }
        }
    }
</script>

<style>
    input{
        border: 1px solid skyblue;
        height: 72rpx;
        padding: 0 20rpx;
    }
</style>

小案例预览图