1潭流、確認(rèn)項(xiàng)目目錄中是否有package.json文件
在每個(gè)前端項(xiàng)目中，都有 package.json 文件柜去，它是項(xiàng)目的配置文件灰嫉，常見的配置有配置項(xiàng)目啟動(dòng)、打包命令嗓奢，聲明依賴包等讼撒。
當(dāng)運(yùn)行npm install命令的時(shí)候，會(huì)根據(jù)package.json文件中的配置自動(dòng)下載所需的模塊股耽，也就是配置項(xiàng)目所需的運(yùn)行和開發(fā)環(huán)境根盒。
package.json文件解析圖
package.json中最重要的兩個(gè)字段就是name和version，它們都是必須的豺谈，如果沒有郑象，就無法正常執(zhí)行npm install命令。npm規(guī)定package.json文件是由名稱和版本號(hào)作為唯一標(biāo)識(shí)符的茬末。
2厂榛、執(zhí)行npm命令，安裝js-md5
npm install --save js-md5
npm install --save js-md5 或者 npm install js-md5 都可以完成js-md5庫的安裝丽惭。
從 npm 5.0.0 開始击奶，已安裝的模塊默認(rèn)添加為依賴項(xiàng)，因此不再需要 --save 選項(xiàng)责掏。其他保存選項(xiàng)仍然存在柜砾，并在 npm install 的 documentation 中列出。
如果安裝太慢换衬，可嘗試變更國(guó)內(nèi)鏡像源后再嘗試安裝痰驱。
npm config set registry http://registry.npmjs.org/
npm install --save js-md5
3、檢查js-md5安裝結(jié)果
檢查MD5庫安裝是否成功
在package.json中檢查MD5庫依賴是否安裝成功
4瞳浦、測(cè)試MD5加密功能
在某個(gè)頁面中局部引入MD5 庫并監(jiān)測(cè)加密結(jié)果
5担映、引入或者掛載MD5方法
（1）、局部引入
import md5 from 'js-md5'
md5('20240215')
// 加密結(jié)果：2410baa624e44bf8e6a2b56064ba0403
（2）叫潦、全局引入
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
this.$md5('MD5加密內(nèi)容')
6蝇完、一個(gè)基于MD5加密的小案例
首先全局引入md5
在main.js中全局引入md5加密庫
<template>
<view>
<label for="">加密內(nèi)容:</label>
<input type="text" v-model="myValue" placeholder="請(qǐng)輸入加密內(nèi)容"/>
<button @click="myMD5">輸出MD5加密后的內(nèi)容</button>
<text>MD5加密前:{{myValue}}</text>
<hr/>
<text>MD5加密后:{{md5text}}</text>
</view>
</template>
<script>
export default {
data() {
return {
myValue:'' ,//用來存放加密前的value值
md5text:'' //用來存放加密后的數(shù)據(jù)
}
},
methods: {
myMD5(){
//使用 v-model 雙向綁定來獲取input表單控件內(nèi)的值
const inputValue = this.myValue;
//
this.md5text = this.$md5Util(inputValue);
// 輸出到控制臺(tái)
console.log('輸入值為：' + inputValue);
}
}
}
</script>
<style>
input{
border: 1px solid skyblue;
height: 72rpx;
padding: 0 20rpx;
}
</style>
小案例預(yù)覽圖
