cdn引入vue
之前公司的老项目是mvc模式，前后端不分离，页面的很多内容都是用的jq+layui的形式，说实话，不好处理。特别是我不是很熟练jq的情况下。
前几天写了一个表格及页面的增删改查，由于编辑页面需要展示的内容过于庞大（需要从天眼查的接口上获取很多的数据），因此不得以重构成vue的页面，企图通过vue的组件来简化页面结构。
想法是好的，但是基础忘了，通过cdn引入的vue.js，是没有办法使用vue的组件功能的，因为浏览器不识别，只有通过vue脚手架搭建的项目，才可以使用vue的组件功能，我很惭愧，我的基础好烂……
话不多说，直接上代码：
cdn引入vue+elementUi
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link href="~/Content/css/elementUi.css" rel="stylesheet" />
<!-- 引入组件库 -->由于我们公司有自己的主题色，所以在引入了elementUi的cdn链接之后，我又下载到本地，更改主题色之后，覆盖之前的样式。
为什么要这样做？
- 如果直接使用自己本地的css样式，会发现icon图标全部失效，变成方块了，就是识别不了了……
- 修改本地的主题色，可以打开css文件，将#409eff颜色全部替换为自己想要的主题色即可
- 先引入cdn的css样式，然后用自己更改过主题色的本地css覆盖，就能完美解决更改主题色并保留图标识别的功能了。
引入本地的json文件
我有一个本地的json文件，想要获取其中的一部分数据，但是通过import的方式是没有办法获取的，
scriipt标签默认的格式是：text/script 如果想要使用Import的形式，需要将type改为;module ，但是我这边还是不起作用,会提示报错:文件Not found，最后是通过下面的方法解决的……
$.get("/Scripts/Common/supplierObj.json", (data) => {
this.supplierObj = data;
}, 'json');通过$.get调取Json文件，然后将获取到的数据赋值到vue中。
vue.js文件引入后使用vue
var vm = new Vue({
el: "#supplierPool",
data() {
return {}
}
})需要注意的一点就是这个el，一定要写，之前在用脚手架搭建的vue项目中，这个el是可以没有的，因此这个地方也坑了我一把，el一定要写，还要是唯一的才可以。
cdn引入的vue使用组件功能
前面已经说了，cdn引入的vue是不能使用组件功能的，但是为了页面简洁和结构清晰，还是需要用到这个组件，因此我借用了Iframe标签，
<el-dialog :title="title" :visible.sync="dialogFormVisible" width="90%" :height="tableHeight">
<iframe src="SupplierDetail" style="width:100%;height:500px;" id="iframe" v-if="dialogFormVisible"></iframe>
</el-dialog>element-ui中的弹层组件dialog，我还是有用到的，但是里面换成了iframe标签，这个地方需要用到iframe的传值问题
iframe标签：父级页面往子级页面传参
增删改查功能：其中的改需要弹层展示详情，这就需要将id传递到详情页面，调取接口获取详情数据。
传参的方式如下：
<span id="currentId" :data-id="id" :data-state="state" style="color:#fff;"></span>
<el-dialog :title="title" :visible.sync="dialogFormVisible" width="90%" :height="tableHeight">
<iframe src="SupplierDetail" style="width:100%;height:500px;" id="iframe" v-if="dialogFormVisible"></iframe>
</el-dialog>我是借用了一个span标签，由于整个页面背景是白色#fff，因此我将span的样式也改为白色，防止页面出现不必要的数据展示。
span上有个自定义的id :data-id="id" 当弹层需要弹出时，给id赋值为当前这条数据的id，传递到子页面中，
iframe标签：子级页面接受父级页面的参数
var id = $("#currentId", window.parent.document).data("id");
var state = $("#currentId", window.parent.document).data("state");通过jq的方式获取到想要的元素，然后通过jq元素.data(‘id’)的形式获取到id，
子级页面获取父级页面的dom元素可以通过window.parent.document的形式获取，这个是获取父级整个dom元素，然后通过“#currentId”缩小范围既可以得到想要的元素了，同理，获取state也是如此
iframe标签：子级页面关闭父级页面的弹层
由于我是使用的父级页面的dialog弹层，然后加载iframe标签来实现的类似于组件的功能，在子级页面修改完内容后，需要关闭这个弹层，应该怎么处理那？
此时就需要子级调用父级的函数了：
父级页面的改动：
mounted() {
var me = this;
window.closeIframe = me.closeDialog;
window.refreshData = me.refreshData;
},
methods:{
closeDialog(){console.log("关闭弹层");},
refreshData(){console.log("刷新数据");}
}在mounted生命周期函数中，将vue中的函数挂载到window上，
然后在子页面处理：通过parent.xxx()的方式进行函数的调用
parent.closeIframe();
parent.refreshData();
```
