需求

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

思路

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

示例

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


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

image-20200307232426923

2.组件login的编写

login.html

<template id="register-tpl">
<div>
<h1 class="register-h1">注册组件</h1>
</div>
</template>

<style>
.register-h1{
color: cyan;
font-family: "Microsoft YaHei UI";
}
</style>

login.js

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

3.组件register的编写

register.html

<template id="register-tpl">
<div>
<h1 class="register-h1">注册组件</h1>
</div>
</template>

<style>
.register-h1{
color: cyan;
font-family: "Microsoft YaHei UI";
}
</style>

register.js

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

4.编写index.html页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jqeury -->
<script src="lib/jquery/jquery-3.4.1.min.js"></script>
<!-- 导入vue.js库 -->
<script src="lib/vue.js"></script>

</head>
<body>

<div id="app">

<a href="" @click.prevent=" comName='login' ">登陆</a>
<a href="" @click.prevent=" comName='register' ">注册</a>

<!-- Vue提供了 component ,来展示对应名称的组件 -->
<!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->
<component :is="comName"></component>

</div>

<!-- 导入组件的import.js -->
<script src="import.js"></script>
<!-- 导入main.js -->
<script src="main.js"></script>

</body>
</html>

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

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

5. 编写import.js

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

// 导入register组件
$('<register></register>').insertAfter("#app");
$('register').load('./components/register/register.html');
document.write('<script src="components/register/register.js"></script>');

6.编写main.js

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

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


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

image-20200307233128635

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

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


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

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

image