VUE3（三十一）html单页面使用VUE3

#VUE3（三十一）html单页面使用VUE3| 来源: 网络整理| 查看: 265

之前一直在VUE3的框架中使用VUE3。

但是我们在做一个小页面的时候，没有必要独立创建一个VUE项目的时候，我们该如何使用VUE3呢？

下边我这边直接放出一个示例，复制粘贴就能用

这里我使用了VUE3+element-plus

Moolsnet第三方对接数据加密示例 span{ display: inline-block; } div { height: 30px; line-height: 30px; } .left{ float: left; } .input-el{ height: 50px; line-height: 50px; } 加密参数 key(16位)： i;;;v(16位)：前端加密,加密值必须是json 前端加密后端解密后端解密 Object.assign(window, Vue); const vue3Composition = { setup() { const data = reactive({ // 加密的json jia_json:"{'name':1,'class_id':2}", // 加密得到的字符串 jia_value:'', // 解密字符串 jie_str:'', // 解密得到的值 jie_value: '', // 加密key key:'', // 加密iv iv:'', }); /** * @name: 加密 * @author: camellia * @email: [email protected] * @date: 2021-08-19 */ const enCode = () => { // 加密所需的秘钥以及偏移字符串，后期我们会为您提供，以下两个字符串仅供测试使用，不可用于正式环境 // const key = '1234567887654321'; // const iv = '1234567887654321'; if(data.key == '' || data.iv == '') { ElementPlus.ElMessage({ showClose: true, message: '请填写加密参数', type: 'warning' }); return; } // 调用加密方法 data.jia_value = encryptCode(data.jia_json, data.key, data.iv); } /** * @name:crypto-js 加密 * @author: camellia * @email: [email protected] * @date: 2021-08-19 * @param: param json 要加密的值（必须是json） * @param: key string 加密秘钥 16位字符串 * @param: iv string 加密偏移量 16位字符串 */ const encryptCode = (param,key,iv) => { // json转json字符串 var text = JSON.stringify(param); // 加载秘钥 var key = CryptoJS.enc.Latin1.parse(key); // 加载偏移量 var iv = CryptoJS.enc.Latin1.parse(iv); // 加密 var encrypted = CryptoJS.AES.encrypt(text, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.ZeroPadding }).toString(); return encrypted; }; /** * @name: 后端解密 * @author: camellia * @email: [email protected] * @date: 2021-08-19 * @param: data type description * @return: data type description */ const deCode = () => { if(data.key == '' || data.iv == '') { ElementPlus.ElMessage({ showClose: true, message: '请填写加密参数', type: 'warning' }); return; } var param = data.jie_str; var postData = Qs.stringify({ params: param, key: data.key, iv: data.iv }); axios.post("https://dlut.mools.net/jiemi.php", postData ) .then(response => { data.jie_value = response.data; }) .catch(error => { // console.log(error); }); } /** * @name: 将data绑定值dataRef * @author: camellia * @email: [email protected] * @date: 2021-08-19 */ const dataRef = toRefs(data); return { deCode, enCode, ...dataRef } }, } // ElementPlus.locale(ElementPlus.lang.zhCn); const app = createApp(vue3Composition).use(ElementPlus).mount("#app"); 复制代码

再赘述一次，上边的代码复制粘贴即可使用

有好的建议，请在下方输入你的评论。

【本文地址】

公司简介

联系我们