静态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>
相关推荐
Jammingpro1 天前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05151 天前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI1 天前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front1 天前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie1 天前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀1 天前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻1 天前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树1 天前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔1 天前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城1 天前
UniApp 实现双语功能
javascript·vue.js·uni-app