作者:敏佳的晴__丶天 | 来源:互联网 | 2023-06-26 01:12
一,安装js-md51,用npm安装liuhongdi@lhdpc:datavuedemo1$npminstall--savejs-md5added1packagein5s21pa
一,安装js-md5
1,用npm安装
liuhongdi@lhdpc:/data/vue/demo1$ npm install --save js-md5
added 1 package in 5s
21 packages are looking for funding
run `npm fund` for details
2,查看js-md5的版本:
liuhongdi@lhdpc:/data/vue/demo1$ npm list js-md5
demo1@0.1.0 /data/vue/demo1
└── js-md5@0.7.3
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,编写js代码:
<template>
<div style="text-align: left;">
原字符串:{{origStr}}<br/>
md5字符串:{{md5Str}}
div>
template>
<script>
import {ref} from "vue";
import md5 from 'js-md5';
export default {
name: "Md5",
setup() {
const origStr = ref("");
const md5Str = ref("");
//调用md5
const setStr = () => {
origStr.value = "我是老刘";
md5Str.value = md5(origStr.value);
}
setStr();
return {
origStr,
md5Str,
}
}
}
script>
<style scoped>
style>
三,测试效果
四,查看vue.js版本:
liuhongdi@lhdpc:/data/vue/demo1$ npm list vue
demo1@0.1.0 /data/vue/demo1
├─┬ @vue/cli-plugin-babel@4.5.15
│ └─┬ @vue/babel-preset-app@4.5.15
│ └── vue@3.2.26 deduped
├─┬ element-plus@1.2.0-beta.6
│ ├─┬ @element-plus/icons-vue@0.2.4
│ │ └── vue@3.2.26 deduped
│ ├─┬ @vueuse/core@7.4.1
│ │ ├─┬ @vueuse/shared@7.4.1
│ │ │ └── vue@3.2.26 deduped
│ │ ├─┬ vue-demi@0.12.1
│ │ │ └── vue@3.2.26 deduped
│ │ └── vue@3.2.26 deduped
│ └── vue@3.2.26 deduped
└─┬ vue@3.2.26
└─┬ @vue/server-renderer@3.2.26
└── vue@3.2.26 deduped