静态HTML引入vue封装组件

在对历史原生html代码使用vue重构项目时，可以利用vue相关组件进行项目优化、实现统一管理，本文结束html+vue的构建方式，欢迎大家阅读交流。

1、下载vue.js

可自行到官网下载所需版本或者使用cdn资源

2、封装通用组件

2.1 封装通用实例化main.js

import { createApp} from '/vue.esm-browser.js'
import commonHead from '/common/Head.js'
import commonFooter from '/common/Footer.js'function init(param) {param.created = function () {const css = ['https://unpkg.com/element-ui/lib/theme-chalk/index.css','themes/home.css','assets/css/index.css']const scripts = ['https://unpkg.com/element-ui/lib/index.js']for (const href of css) {console.log(href)let style = document.createElement('link');style.rel = "stylesheet";style.href = href;document.head.append(style)}for (const src of scripts) {let script = document.createElement('script');script.src = src;document.head.append(script)}}const app = createApp(param)app.component('common-head', commonHead);app.component('common-footer', commonFooter);app.mount("#app");
}
export {init}

2.2、封装组件 Head.js /Footer.js

2.2.1 Head.js

let head=`<el-header style="height: 10%;"><div class="header">我是Header</div></div></el-header>`
export default {template:head ,
}

2.2.2 Footer.js

let footer=`<el-header style="height: 10%;"><div class="header">我是Footer</div></div></el-header>`
export default {template:footer,
}

3、在html中进行实例化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body>
<div id="app"><common-head></common-head><div class="container"><h1>{{ message }}</h1><input type="text" v-model="name"></input><h1>{{ name }}</h1><button @click="getData">get</button></div><common-footer></common-footer>
</div>
</body>
<script type="module" >import {init} from '/main.js'init({data() {return {message: 'Hello World!',name:'name',userName:''}},methods:{getData:function(){alert(this.name);}}})
</script>
<style>#app{padding: 0px;margin: 0px;height: 100%;width: 100%;}.container{background-color: white;height: 55%;padding: 10px;}</style>
</html>