静态HTML引入vue封装组件

在对历史原生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>
相关推荐
人工智能训练师5 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny075 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy6 小时前
css的基本知识
前端·css
昔人'6 小时前
css `lh`单位
前端·css
破无差6 小时前
《赛事报名系统小程序》
小程序·html·uniapp
Nan_Shu_6147 小时前
Web前端面试题(2)
前端
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队9 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光9 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军9 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite