静态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>
相关推荐
Justinc.2 分钟前
CSS3新增边框属性(五)
前端·css·css3
neter.asia18 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫19 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
十一吖i37 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年38 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_39 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891141 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾43 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu1 小时前
前端 Canvas 绘画 总结
前端
CodeToGym1 小时前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化