随着组件化模式的发展，越来越多的模式依赖以组件化的开发模式；最典型的例子就是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秒后失效