在对历史原生html代码使用vue重构项目时，可以利用vue相关组件进行项目优化、实现统一管理，本文结束html+vue的构建方式，欢迎大家阅读交流。
1、 下载vue.js
可自行到官网下载所需版本或者使用cdn资源
2、封装通用组件
2.1 封装通用实例化main.js
javascript
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
javascript
let head=`
<el-header style="height: 10%;">
<div class="header">
我是Header
</div>
</div>
</el-header>
`
export default {
template:head ,
}
2.2.2 Footer.js
javascript
let footer=`
<el-header style="height: 10%;">
<div class="header">
我是Footer
</div>
</div>
</el-header>
`
export default {
template:footer,
}
3、在html中进行实例化
javascript
<!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>