在历史问题的情况下&＃xff0c;存在需要往jquery项目中引入vue.js框架的情况&＃xff0c;这种情况下&＃xff0c;因为前期并没有使用webpack进行打包压缩&＃xff0c;所以考虑直接使用原生的js拆分vue.js的组件&＃xff0c;不依赖与wabpack等打包软件。
webpack
js
vue.js
wabpack
因为没有使用webpack以及babel等高级语法编译工具&＃xff0c;只有jquery支持&＃xff0c;所以我采用将组件按照该html以及js进行文件夹封装&＃xff0c;然后采用jquery的load方法来导入组件。
jquery
load
login.html
注册组件h1>div>template>.register-h1{color: cyan;font-family: "Microsoft YaHei UI"; }style>login.jsvar login &＃61; {template: "#login-tpl", data() {return {msg: &＃39;123&＃39;, }; }};3.组件register的编写register.html注册组件h1>div>template>.register-h1{color: cyan;font-family: "Microsoft YaHei UI"; }style>register.js// 创建注册组件var register &＃61; {template: &＃39;#register-tpl&＃39;};4.编写index.html页面span style&＃61;"line-height: 26px;">html>Titletitle>script>script>head>登陆a>注册a>component>div>script>script>body>html>在这里要注意&＃xff1a;jquery的load方法是不能用在 vue 的 app 容器内的&＃xff0c;但是外部就可以直接调用。所以在下面的使用import.js引入所有组件的内容&＃xff0c;然后用 main.js 来编写 vm 实例。5. 编写import.js// 导入login组件$(&＃39;&＃39;).insertAfter("#app"); // 在app后面加入login标签$(&＃39;login&＃39;).load(&＃39;./components/login/login.html&＃39;); // 导入login.htmldocument.write(&＃39;);// 导入register组件$(&＃39;&＃39;).insertAfter("#app");$(&＃39;register&＃39;).load(&＃39;./components/register/register.html&＃39;);document.write(&＃39;);6.编写main.js// 创建Vue的实例var vm &＃61; new Vue({el: &＃39;#app&＃39;,data: {comName: &＃39;&＃39;, // 设置默认的组件显示登陆 },components: { login, // 注册login组件 register, // 注册register组件 }});7.在浏览器打开index.html查看效果image-20200307233128635好了&＃xff0c;到这里基本的组件拆分已经实现。「更多精彩原创Devops文章&＃xff0c;快来关注我的公众号&＃xff1a;【Devops社群】 吧&＃xff1a;」image点击下面&＃xff0c;查看更多Vue系列文章
login.js
var login &＃61; {template: "#login-tpl", data() {return {msg: &＃39;123&＃39;, }; }};
register.html
注册组件h1>div>template>.register-h1{color: cyan;font-family: "Microsoft YaHei UI"; }style>register.js// 创建注册组件var register &＃61; {template: &＃39;#register-tpl&＃39;};4.编写index.html页面span style&＃61;"line-height: 26px;">html>Titletitle>script>script>head>登陆a>注册a>component>div>script>script>body>html>在这里要注意&＃xff1a;jquery的load方法是不能用在 vue 的 app 容器内的&＃xff0c;但是外部就可以直接调用。所以在下面的使用import.js引入所有组件的内容&＃xff0c;然后用 main.js 来编写 vm 实例。5. 编写import.js// 导入login组件$(&＃39;&＃39;).insertAfter("#app"); // 在app后面加入login标签$(&＃39;login&＃39;).load(&＃39;./components/login/login.html&＃39;); // 导入login.htmldocument.write(&＃39;);// 导入register组件$(&＃39;&＃39;).insertAfter("#app");$(&＃39;register&＃39;).load(&＃39;./components/register/register.html&＃39;);document.write(&＃39;);6.编写main.js// 创建Vue的实例var vm &＃61; new Vue({el: &＃39;#app&＃39;,data: {comName: &＃39;&＃39;, // 设置默认的组件显示登陆 },components: { login, // 注册login组件 register, // 注册register组件 }});7.在浏览器打开index.html查看效果image-20200307233128635好了&＃xff0c;到这里基本的组件拆分已经实现。「更多精彩原创Devops文章&＃xff0c;快来关注我的公众号&＃xff1a;【Devops社群】 吧&＃xff1a;」image点击下面&＃xff0c;查看更多Vue系列文章
register.js
// 创建注册组件var register &＃61; {template: &＃39;#register-tpl&＃39;};
span style&＃61;"line-height: 26px;">html>Titletitle>script>script>head>登陆a>注册a>component>div>script>script>body>html>在这里要注意&＃xff1a;jquery的load方法是不能用在 vue 的 app 容器内的&＃xff0c;但是外部就可以直接调用。所以在下面的使用import.js引入所有组件的内容&＃xff0c;然后用 main.js 来编写 vm 实例。5. 编写import.js// 导入login组件$(&＃39;&＃39;).insertAfter("#app"); // 在app后面加入login标签$(&＃39;login&＃39;).load(&＃39;./components/login/login.html&＃39;); // 导入login.htmldocument.write(&＃39;);// 导入register组件$(&＃39;&＃39;).insertAfter("#app");$(&＃39;register&＃39;).load(&＃39;./components/register/register.html&＃39;);document.write(&＃39;);6.编写main.js// 创建Vue的实例var vm &＃61; new Vue({el: &＃39;#app&＃39;,data: {comName: &＃39;&＃39;, // 设置默认的组件显示登陆 },components: { login, // 注册login组件 register, // 注册register组件 }});7.在浏览器打开index.html查看效果image-20200307233128635好了&＃xff0c;到这里基本的组件拆分已经实现。「更多精彩原创Devops文章&＃xff0c;快来关注我的公众号&＃xff1a;【Devops社群】 吧&＃xff1a;」image点击下面&＃xff0c;查看更多Vue系列文章
在这里要注意&＃xff1a;jquery的load方法是不能用在 vue 的 app 容器内的&＃xff0c;但是外部就可以直接调用。
所以在下面的使用import.js引入所有组件的内容&＃xff0c;然后用 main.js 来编写 vm 实例。
import.js
main.js
vm
// 导入login组件$(&＃39;&＃39;).insertAfter("#app"); // 在app后面加入login标签$(&＃39;login&＃39;).load(&＃39;./components/login/login.html&＃39;); // 导入login.htmldocument.write(&＃39;);// 导入register组件$(&＃39;&＃39;).insertAfter("#app");$(&＃39;register&＃39;).load(&＃39;./components/register/register.html&＃39;);document.write(&＃39;);
// 创建Vue的实例var vm &＃61; new Vue({el: &＃39;#app&＃39;,data: {comName: &＃39;&＃39;, // 设置默认的组件显示登陆 },components: { login, // 注册login组件 register, // 注册register组件 }});
好了&＃xff0c;到这里基本的组件拆分已经实现。
「更多精彩原创Devops文章&＃xff0c;快来关注我的公众号&＃xff1a;【Devops社群】 吧&＃xff1a;」
点击下面&＃xff0c;查看更多Vue系列文章
京公网安备 11010802041100号