Vue中常見混淆用法匯總
引言
在Vue開發(fā)中,對(duì)于新手來(lái)說(shuō),常常會(huì)被諸如new Vue()、export default {}等用法所困擾。此外,對(duì)于代碼的混淆和加固也是開發(fā)過(guò)程中不可或缺的一部分。本文將對(duì)這些常見用法進(jìn)行匯總整理,并介紹如何通過(guò)混淆器對(duì)代碼進(jìn)行加固,以提高應(yīng)用的安全性。
1. new Vue()
new Vue()是用來(lái)創(chuàng)建一個(gè)Vue實(shí)例的構(gòu)造函數(shù),可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項(xiàng)。
import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
2. export default {}
export default用于導(dǎo)出模塊,在其他模塊需要調(diào)用時(shí)使用import命令引入。
// App.vue <template> <div id="app"> <router-view /> </div> </template> <script> export default { name: "App" }; </script>
3. createApp()
在Vue3.x版本中,創(chuàng)建實(shí)例的方法變成了createApp()。
import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')
4. Vue.component
Vue.component用于全局注冊(cè)組件。
import Vue from 'vue' import App from './App.vue' import PageTools from '@/components/PageTools' Vue.component('PageTools', PageTools) new Vue({ el: '#app', components: { App }, template: ' <div> <App/> <PageTools></PageTools> </div>' })
5. Vue3注冊(cè)全局組件
// GlobalComponent.vue <template> <button @click="count++">點(diǎn)了 {{ count }} 次!</button> </template> <script> export default { name: "GlobalComponent", data() { return { count: 0, }; }, }; </script> // main.js import {createApp} from 'vue' import App from './App.vue' import GlobalComponent from "./components/GlobalComponent" const app = createApp(App) app.component('GlobalComponent',GlobalComponent); app.mount('#app') // App.vue <template> <h1>Hello element-plus!</h1> <GlobalComponent></GlobalComponent> <br /> <about></about> </template> <script> import About from "./components/About.vue"; export default { name: "App", components: { About, }, }; </script> // About.vue <template> <h2>this is About! </h2> <br/> <GlobalComponent></GlobalComponent> </template>
6. Vue.use()
Vue.use()用于注冊(cè)全局組件和Vue的原型添加一些東西。
Vue.use(VueRouter) Vue.use(Vuex) Vue.use(vant) Vue.use(ElementUI)
7. Vue.prototype
Vue.prototype是一種注冊(cè)全局變量的方式,使用Vue.prototype的變量可以全局訪問,例如axios。
import axios from 'axios'; Vue.prototype.$http = axios;
8. 關(guān)于代碼混淆
代碼混淆是保護(hù)應(yīng)用的一種方式,可以通過(guò)特定平臺(tái)對(duì)應(yīng)用進(jìn)行加固處理。推薦使用ipaguard等混淆工具對(duì)代碼進(jìn)行加固,以增加應(yīng)用的安全性。
Ipa Guard是一款功能強(qiáng)大的ipa混淆工具,不需要ios app源碼,直接對(duì)ipa文件進(jìn)行混淆加密。可對(duì)IOS ipa 文件的代碼,代碼庫(kù),資源文件等進(jìn)行混淆保護(hù)。 可以根據(jù)設(shè)置對(duì)函數(shù)名、變量名、類名等關(guān)鍵代碼進(jìn)行重命名和混淆處理,降低代碼的可讀性,增加ipa破解反編譯難度??梢詫?duì)圖片,資源,配置等進(jìn)行修改名稱,修改md5。只要是ipa都可以,不限制OC,Swift,F(xiàn)lutter,React Native,H5類app。
所以就要使用到混淆器,混淆器是把里面的代碼變量等信息進(jìn)行重命名,這樣可讀性會(huì)變得非常差,接著,
到這里,我們完成了對(duì)代碼的混淆,但是還沒有進(jìn)行加固,防止反編譯,所以,請(qǐng)往下看
然后導(dǎo)入自己的包就可以了,這里是流水式的走下來(lái),所以只需要導(dǎo)入和導(dǎo)出就可以了,
添加單個(gè)文件,選擇好剛剛混淆后的包,然后你做的事情就是等,等待上傳完–加固完–下載完–已完成,當(dāng)?shù)揭淹瓿傻臅r(shí)候,說(shuō)明這里已經(jīng)可以導(dǎo)出了,導(dǎo)出需要前面提到的自己創(chuàng)建的簽名,這里可是會(huì)用到的,如果不用,則包安裝包可能會(huì)出現(xiàn)問題
選擇導(dǎo)出簽名包,選擇簽名文件,輸入密碼,然后點(diǎn)擊開始導(dǎo)出
導(dǎo)出的包是經(jīng)過(guò)混淆,經(jīng)過(guò)加固比較安全的包了
總結(jié)
本文對(duì)Vue中的常見用法進(jìn)行了匯總介紹,包括new Vue()
、export default {}
、createApp()
、Vue.component
、Vue3注冊(cè)全局組件
、Vue.use()
等內(nèi)容。同時(shí),還介紹了如何使用混淆器對(duì)代碼進(jìn)行加固,以提高應(yīng)用的安全性。
到此這篇關(guān)于Vue中常見混淆用法匯總的文章就介紹到這了,更多相關(guān)Vue混淆內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3動(dòng)態(tài)路由(響應(yīng)式帶參數(shù)的路由)變更頁(yè)面不刷新的問題解決辦法
問題來(lái)源是因?yàn)槲业拈_源項(xiàng)目Maple-Boot項(xiàng)目的網(wǎng)站前端,因?yàn)轫?xiàng)目主打的內(nèi)容發(fā)布展示,所以其中的內(nèi)容列表頁(yè)會(huì)根據(jù)不同的菜單進(jìn)行渲染不同的路由,本文降介紹Vue3動(dòng)態(tài)路由變更頁(yè)面不刷新的問題解決辦法,需要的朋友可以參考下2024-07-07vue-cli3使用postcss-plugin-px2rem方式
這篇文章主要介紹了vue-cli3使用postcss-plugin-px2rem方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07ant-design-vue前端UI庫(kù),如何解決Table中時(shí)間格式化問題
這篇文章主要介紹了ant-design-vue前端UI庫(kù),如何解決Table中時(shí)間格式化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue3 構(gòu)建 Web Components使用詳解
這篇文章主要為大家介紹了Vue3 構(gòu)建 Web Components使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09解決vue.js提交數(shù)組時(shí)出現(xiàn)數(shù)組下標(biāo)的問題
今天小編就為大家分享一篇解決vue.js提交數(shù)組時(shí)出現(xiàn)數(shù)組下標(biāo)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11