.html頁面引入vue并使用公共組件方式
.html頁面引入vue并使用公共組件
問題描述
整體項(xiàng)目采用傳統(tǒng) .html 文件搭建，vue僅作為渲染數(shù)據(jù)工具使用，需要使用的地方使用 <script> 標(biāo)簽引入。
現(xiàn)有數(shù)個(gè)頁面，每個(gè)頁面都包含相同 header 和 footer ，希望可以把 header 和 footer 提取出來，避免太多重復(fù)代碼。
解決辦法
公共部分寫在 .js 文件里，本質(zhì)就是在當(dāng)前頁面中寫的公共組件，組件規(guī)則遵從vue的組件規(guī)則。
template后面可以采用字符串拼接(內(nèi)容少)，或者是使用 `定義模板字符串。
目錄結(jié)構(gòu)
—test
——header.js //公共頭部
——index.html //頁面
——vue.js
index.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<!--引入vue-->
<script type="text/javascript" src="vue.js"></script>
<!--引入公共組件-->
<script type="text/javascript" src="header.js"></script>
</head>
<body style="font-size: 30px">
<div id="vue_app">
<!--自定義的組件使用-->
<common-head></common-head>
<!--頁面自有內(nèi)容-->
<div style="background: #fba">我是內(nèi)容</div>
</div>
</div>
<script>
//vue
app_all=new Vue({
el: "#vue_app"
})
</script>
</body>
</html>
header.js
/*Vue.component('common-head',{
template:'<div>'+
'<h1>hhhhhhh</h1>' +
'<h1>duusdfsjkdfh</h1>' +
'</div>'
});*/
Vue.component('common-head',{
template:`<div style="background: #baf">
<h1>這是公共組件</h1>
<h1>公共的頭部</h1>
</div>`
});
vue公共組件框架搭建
最近在進(jìn)行組件開發(fā)，為了方便組件的引用與維護(hù)，準(zhǔn)備采用“npm本地文件file引入”的方式將組件從項(xiàng)目中解耦，并使用git進(jìn)行組件的版本管理與協(xié)作開發(fā)。
file本地文件引入，會(huì)在項(xiàng)目中package.json文件添加依賴，但是不會(huì)在node_modules文件夾下安裝組件庫，組件會(huì)直接引用公用組件庫中的的文件
步驟詳述
1.使用vue init webpack-simple demo-ui 創(chuàng)建Vue組件項(xiàng)目
不使用vue init webpack的原因是，組件開發(fā)中webpack安裝會(huì)有大量依賴是無用的，webpack-simple對(duì)于組件來說已經(jīng)足夠了
2.src新增components文件夾用于存放組件文件
這里新增一個(gè)tooltip組件
3.根目錄新增index.js文件，用于導(dǎo)出組件內(nèi)容
//導(dǎo)出tooltip組件
import demoUI from './src/components/tooltip/tooltip'
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component(demoUI.name, demoUI)
}
demoUI.install = function(Vue){
Vue.component(demoUI.name, demoUI)
}
export default demoUI
4.package.json文件修改
// 權(quán)限設(shè)置，一定要為false private:false // 新增字段：main require方法可以通過這個(gè)配置找到入口文件 main:"./dist/demo-ui.js"
5.webpack.config.js文件修改
var path = require('path')
var webpack = require('webpack')
// 增加NODE_ENV常量，用于判斷生產(chǎn)環(huán)境還是開發(fā)環(huán)境
const NODE_ENV = process.env.NODE_ENV
module.exports = {
//生產(chǎn)環(huán)境下進(jìn)入index.js文件 開發(fā)環(huán)境進(jìn)入main.js 方便組件開發(fā)看效果
entry: NODE_ENV == 'development' ? './src/main.js' : './index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'demo-ui.js', // 定義輸出文件名
library: 'demo-ui', // 定義require時(shí)的模塊名
libraryTarget: 'umd', // 指定輸出格式
umdNamedDefine: true // 對(duì)UMD構(gòu)建過程中的AMD模塊進(jìn)行命名，否則使用匿名的define
},
devtool: '#eval-source-map' //編譯時(shí)是否生成map文件，不需要map文件，刪掉該屬性
//其余配置默認(rèn)即可
}
6.修改 index.html 文件
// 默認(rèn)編譯文件引入路徑 <script src="/dist/build.js"></script> // 這邊編譯文件定義為wafa-ui,路徑修改為 <script src="/dist/demo-ui.js"></script>
7.配置完畢，webpack編譯文件
運(yùn)行 npm run build 編譯文件
/dist/ 文件夾下生成 demo-ui.js 和 demo-ui.map.js 文件
8.其它項(xiàng)目使用該組件
“npm file引入” 安裝公用組件庫 npm install …/demo-ui ps：wafa-ui需和其它項(xiàng)目在同一級(jí)目錄下
main.js 文件全局引用組件
// 全局組件引入 import demoUI from "demo-ui" Vue.use(demoUI)
具體業(yè)務(wù)中使用
<demoTooltip title=“這里是提示內(nèi)容”> Tooltip內(nèi)容 </demoTooltip>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue動(dòng)態(tài)路由實(shí)現(xiàn)多級(jí)嵌套面包屑的思路與方法
在實(shí)際項(xiàng)目中我們會(huì)碰到多層嵌套的組件組合而成，比如我們常見的面包屑導(dǎo)航，下面這篇文章就來給大家介紹關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由多級(jí)嵌套面包屑的思路與方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法
Vite在默認(rèn)配置下會(huì)將資源打包至assets文件夾并添加哈希值,不同于Webpack的多文件夾存放方式,Vite只對(duì)public文件夾不進(jìn)行打包處理,而Webpack不打包public和static文件夾,本文介紹vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法,感興趣的朋友一起看看吧2024-09-09
本篇文章主要介紹了vue使用iframe嵌入網(wǎng)頁的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了vue模擬加載更多功能（數(shù)據(jù)追加），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
Vue使用PDF.js實(shí)現(xiàn)瀏覽pdf文件功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用PDF.js實(shí)現(xiàn)瀏覽pdf文件功能，文中的實(shí)現(xiàn)步驟講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下2023-04-04
Vue中引入使用patch-package為依賴打補(bǔ)丁問題
這篇文章主要介紹了Vue中引入使用patch-package為依賴打補(bǔ)丁問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
淺析Visual Studio Code斷點(diǎn)調(diào)試Vue
本篇文章給大家總結(jié)了Visual Studio Code斷點(diǎn)調(diào)試Vue的方法以及心得分享，需要的朋友參考學(xué)習(xí)下。2018-02-02
本篇文章主要介紹了詳解Vue方法與事件。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的示例代碼
在當(dāng)今數(shù)字化的時(shí)代,用戶體驗(yàn)的優(yōu)化至關(guān)重要,物流信息的展示作為電商和供應(yīng)鏈領(lǐng)域中的關(guān)鍵環(huán)節(jié),其呈現(xiàn)方式直接影響著用戶對(duì)貨物運(yùn)輸狀態(tài)的感知和滿意度,所以本文介紹了Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的方法,需要的朋友可以參考下2024-08-08
vue是一個(gè)mvvm框架，即數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化。本文將通過示例詳解其中原理，需要的可以參考一下2022-05-05