56. Vue原生js的组件拆分结构设计

需求

在历史问题的情况下，存在需要往jquery项目中引入vue.js框架的情况，这种情况下，因为前期并没有使用webpack进行打包压缩，所以考虑直接使用原生的js拆分vue.js的组件，不依赖与wabpack等打包软件。

思路

因为没有使用webpack以及babel等高级语法编译工具，只有jquery支持，所以我采用将组件按照该html以及js进行文件夹封装，然后采用jquery的load方法来导入组件。

示例

1. 首先编写基础文档结构

image-20200307232426923

2.组件login的编写

login.html

login.js

var login = {
    template: "#login-tpl",
    data() {
        return {
            msg: '123',
        };
    }
};

3.组件register的编写

register.html

register.js

// 创建注册组件
var register = {
    template: '#register-tpl'
};

4.编写index.html页面

    
    
    
    
    
    






    登陆
    注册

    
    
    

在这里要注意：jquery的load方法是不能用在 vue 的 app 容器内的，但是外部就可以直接调用。

所以在下面的使用import.js引入所有组件的内容，然后用 main.js 来编写 vm 实例。

5. 编写import.js

// 导入login组件
$('').insertAfter("#app"); // 在app后面加入login标签
$('login').load('./components/login/login.html'); // 导入login.html
document.write('');

// 导入register组件
$('').insertAfter("#app");
$('register').load('./components/register/register.html');
document.write('');

6.编写main.js

// 创建Vue的实例
var vm = new Vue({
    el: '#app',
    data: {
        comName: '', // 设置默认的组件显示登陆
    },
    components: {
        login, // 注册login组件
        register, // 注册register组件
    }
});

7.在浏览器打开index.html查看效果

image-20200307233128635

好了，到这里基本的组件拆分已经实现。

更多精彩原创Devops文章，快来关注我的公众号：【Devops社群】 吧：

image

image