随着组件化模式的发展，越来越多的模式依赖以组件化的开发模式；最典型的例子就是vue脚手架的组件化开发已经慢慢成为了前端的必备技能
但有多种情况是我们没有用vue脚手架去做的项目，例如 前后端的混合模式，我们的代码与后端的代码共同组成一个项目，我们就没有办法使用，又或者我们明确的需求表明我们的网站的开发，不可以使用vue脚手架的模式，接下来我们该怎么使用vue的组件化开发模式
当我们不能使用vue脚手架，我们怎么使用引入 jquery,vue 的原生文件来做这样的事
核心思想，Vue.extend({}) 再次注册组件，为 .html 的文件格式， $.ajax() 用于获取 .html 的文件内容，然后加入到 body 标签下面，用于加载此文件，从而完成 组件化的 开发 和 引入
再次我们需要用两个文件来做这样的事
这是我们的主文件 index.html
以下方式是可以兼容到 ie9 的写法，目前没有碰到过要兼容到更低版本的需求，不过我们可以加浏览器的升级提示，如果小于ie9，提醒升级
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 原生vue组件的开发模式 </title> <!-- 先引入 Vue jquery 插件--> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div id="app"> <!-- 子组件 --> <parent></parent> </div> </body> <script> // 定义了全局变量，用于存放组件 var components = {}; // 封装了此方法，同步的请求了 .html 文件的内容，注意：不能使用异步请求 function load(a){ for(var i=0;i<a.length;a++){ $.ajax({ url: a[i], async: false, success: function(res){ // 在body下插入获取到 .html 文件的内容，浏览器会自动解析html标签 $('body').append(res); } }) } } // 此封装的核心价值为按需加载，我不会一开始将所有组件都加载进来，但是加载进来的组件，我们就可以不用进行加载 // 具体的判断方式，判断 components 的全局变量，如果有这个组件，就可以不调用这个方法 load(['./07.html']) new Vue({ el: '#app', // 这个是主组件，也是父组件 data: function(){ return { } }, components: { // 如果组件的名称为驼峰式命名法，组件名称要用 - 隔开 如 tabList 标签名为 <tab-list> 'parent':components.parents // 子组件 } }) </script> </html>
接下来我们看看vue 的组件写法，相信大家也看到了路径的格式，我们在当前的文件下创建一个 07.html 内容如下
<style type="text/css"> .a{ color: red; } </style> <!-- 推荐使用此方式 如果使用 template 标签会报错 --> <script type="text/template" id="com"> <div> {{a}} </div> <!-- 这里面就可以使用 vue 的方式 --> </script> <script> // 在主文件的 components 变量中赋值给 parents 属性，是为了按需加载及防止2次加载 components.parents = Vue.extend({ // Vue.extend 的方式最好，Vue.components 的方式也是会报错 template: '#com', // 此 id 对象 script模版的 id data: function(){ // 此后面的写法跟vue组件的写法一模一样， return { a: '啊啊啊' } }, }) </script>
这是经历了两场项目的细心琢磨最好的解决方法，尝试了所有方法，此方法便于维护，所有的代码及思想写法都给了跟我一样爬坑的人，坑坑洼洼洼洼坑坑，只为下次写更好、更完美项目，加油打工人
-------------------》
写一下还需要攻克的问题或者避免左右的坑
ie9的placeholder 的问题：不支持这样的写法，当使用 v-if 会出现网上的方法就是出问题
本地存储，当使用ifream 的使用，我们可能在里面使用了第三方的域名，第三方域名下的本地存储在浏览器无痕模式下会有问题
window.open 方法，打开新的窗口的限制，必须是用户的行为（例如 点击事件）后5秒内可以打开新窗口，5秒后失效