更新 如何在已有的HTML專案中嵌入Vue

2021-10-12 17:29:22 字數 1976 閱讀 4137

有沒有遇到一種尷尬的情況?就是在已有的html專案中嵌入vue,不需要專案構建工具,純js/css/html

廢話不多說,直接上**:

index.html

包含兩個元件(main/about)

toabout1

}

+}todetail

index.html的js部分

1.匯入相關的類庫

2.vue/vuex/vuerouter在js中使用vuerouter:當引入了vue-router.min.js後,可以在js中直接 new vuerouter()的方式建立路由,然後掛載到vm物件中即可。routes中元件的建立見下文見**:

// routes包含元件內容,和vue專案的routes一樣即可

var routes = [,

}]var router = new vuerouter()

vuex:不是所有的專案都需要vuex的,況且本來就是在已存在的html中嵌入vue,可以使用自定義的全域性量代替vuex的作用。所以此處看專案需要了。

見**:

// 建立store物件

var store = new vuex.store(,

mutations: }})

// 全域性量持有store,方便再html**中使用

vuestore = store

此處使用vuex是完全參考vue文件的,詳情可移步傳送門

vue:建立vue例項,將上面建立的router/store掛載到vue例項上

見**:

var vm = new vue(

},methods: ,

created: function()

})

3.建立元件main元件,見**:

var main = 

},methods: )}},

created: function() ,

template: $('#main').html() // 獲取html模板

}

about元件,見**

var about = 

},methods: ,傳參時用router.push(),***為傳遞的visid引數

*/alert(this.$route.params.visid);

},increment: function()

},created: function() ,

template: $('#about').html()

}

至此,乙個index.html頁面巢狀vue的需求就基本做好了,具有router和vuex功能。2020 12 24更新關於template模板的引用方式這裡上一張官方解釋的截圖:

使用:

var detail = ,

created: function() ,

methods: })}

},template: '#temp_detail' // 對應script中的id屬性

}

如何在VirtualBox裡為已有的硬碟修改大小?

這些天,由於課程需要,安裝wince開發環境。由於本人並不想在實體機上安裝xp,所以選擇在虛擬機器中安裝。虛擬機器選擇的是virtualbox,這是一款我很喜歡的軟體。在搭建的過程中,由於事先安排的20g大小不夠了,所以需要擴大硬碟的大小。以下是主要步驟 開啟cmd,進入到具體虛擬機器映象的存放位置...

如何在專案中做出亮點

之前在群裡參加活動的同學,有不少說在小公司,被業務需求壓著。既然大家都說在做業務,那麼,正看到這裡的你,能不能5分鐘說明白,你負責的業務是什麼?這個問題我在活動群的github issue活動中,帶有業務理解標籤的題目裡經常會問到,可是大部分同學都沒有說到位,甚至答非所問。這裡談談我個人對業務的理解...

如何在Vue Element專案中配置國際化

vue i18n 1 建立i18n資料夾 在專案根目錄,即src目錄項建立i18n目錄,此目錄下用於存放多語言的翻譯如zh.js儲存中文翻譯,en.js儲存英文翻譯,id.js 儲存印尼語等。en.js export default zh.js export default 2 建立preset資料...