.html頁面引入vue并使用公共組件方式
.html頁面引入vue并使用公共組件
問題描述
整體項(xiàng)目采用傳統(tǒng) .html 文件搭建，vue僅作為渲染數(shù)據(jù)工具使用，需要使用的地方使用 <script> 標(biāo)簽引入。
現(xiàn)有數(shù)個頁面，每個頁面都包含相同 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本地文件引入，會在項(xiàng)目中package.json文件添加依賴，但是不會在node_modules文件夾下安裝組件庫，組件會直接引用公用組件庫中的的文件
步驟詳述
1.使用vue init webpack-simple demo-ui 創(chuàng)建Vue組件項(xiàng)目
不使用vue init webpack的原因是，組件開發(fā)中webpack安裝會有大量依賴是無用的，webpack-simple對于組件來說已經(jīng)足夠了
2.src新增components文件夾用于存放組件文件
這里新增一個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方法可以通過這個配置找到入口文件 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時的模塊名
libraryTarget: 'umd', // 指定輸出格式
umdNamedDefine: true // 對UMD構(gòu)建過程中的AMD模塊進(jìn)行命名，否則使用匿名的define
},
devtool: '#eval-source-map' //編譯時是否生成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)目在同一級目錄下
main.js 文件全局引用組件
// 全局組件引入 import demoUI from "demo-ui" Vue.use(demoUI)
具體業(yè)務(wù)中使用
<demoTooltip title=“這里是提示內(nèi)容”> Tooltip內(nèi)容 </demoTooltip>
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue+iview使用樹形控件的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要為大家介紹了vscode添加vue模板步驟示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
以簡單的樹形組件為案例,實(shí)現(xiàn)在組件中遞歸組件,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)遞歸組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
uniapp組件uni-file-picker中設(shè)置使用照相機(jī)和相冊權(quán)限的操作方法
這篇文章主要介紹了uniapp組件uni-file-picker中設(shè)置使用照相機(jī)和相冊的權(quán)限,在uniapp中，我們通常會使用uni-file-picker這個組件，但是這個組件中，有點(diǎn)缺陷，就是沒有對這個功能的傳值設(shè)置，這里就要給組件進(jìn)行修改了，需要的朋友可以參考下2022-11-11
本篇文章主要介紹了vue+iview寫個彈框的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單的登錄彈出框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
在vue3中,如果你用reactive聲明了一個對象,用另一個對象直接給它賦值,那么它就會失去響應(yīng)式,下面這篇文章主要給大家介紹了關(guān)于Vue3中reactive丟失響應(yīng)式問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vuex總體案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue element-ui el-tooltip組件失效問題及解決
這篇文章主要介紹了vue element-ui el-tooltip組件失效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
electron-vite工具打包后如何通過內(nèi)置配置文件動態(tài)修改接口地址
使用electron-vite?工具開發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包,對于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過內(nèi)置配置文件動態(tài)修改接口地址實(shí)現(xiàn)方法,需要的朋友可以參考下2024-05-05