引言

在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)文章希望大家以后多多支持腳本之家！

最新評(píng)論