在对历史原生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=`我是Header`export default {template:head ,} 2.2.2 Footer.js
let footer=`我是Footer`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>