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