一、CDN的方式是什么

CDN（内容分发网络）本身是指一种请求资源的方式。说白了就是在本地，通过script头去请求对应的脚本资源的一种方式。我在这里要说的就是直接引用或者下载Vue.js和iview.js放在本地，进行项目开发的方式。而不是通过npm包管理工具去下载vue包。

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>

二、为什么采用cdn的方式

目前开发vue项目大部分使用的是编译工具管理的方式。即webpack + glup + eslint + bable的方式，虽然功能强大，适用于中大型项目的开发和管理。但是对于刚学习vue入门级的萌新来说，需要掌握的东西太多。有些前端开发工程师，在不熟悉node的情况下，可能需要摸索很久才可以入门；况且，对于小型项目，或者涉密项目（无法进行npm包安装及管理，项目源码必须在涉密方环境修改），这种方式可能并不适合。不过本人亲自尝试，发现确实有许多不方便的地方。而且尚有一些还未解决，写这篇博客也是为了能与大家讨论下我这种开发模式的不足；

文章最后附本人github源码

三、过程

1 引入vue.js和iview。

cdn方式：

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>

本地下载方式：
下载vue.js.和iview。下载完之后如上面一样，在html中分别引入本地资源。

 <link rel="stylesheet" type="text/css" href="lib/iview/iview.css">
 <script type="text/javascript" src="lib/vue.js"></script>
 <script type="text/javascript" src="lib/iview/iview.min.js"></script>

从引入开始就遇到了问题。注意：在lib文件夹下放置iview内容的地方，一定要将下载下来的iview包中的dist目录下fonts文件夹拷贝到iview.css同级目录。因为在页面运行过程中，iview.css会请求同级目录下的字体文件。如果找不到，所有字体样式相关的样式都会坏掉。
在这里插入图片描述

做完了这一步，引入工作算是完成了

2 基本功能

按照vue最基本的架构。创建app对象，管理所有数据和操作

<div id="app">
        
</div>

const global_vue = new Vue().$mount('#app')

发现所有的功能和函数都可以正常使用，拷贝iview中的组件示例，也可以正常加载和绑定。似乎到这里项目就可以正常进行开发了。然而很快，我就发现了问题。

3 组件

大家都知道，在以webpack为基础集成的vue项目中，一个组件的声明非常容易。特有的.vue文件，会将模板(template)、脚本script、样式分的很清楚。最终由编译器组合，生成浏览器能够识别的代码。可如今，我们采用html的方式，如何实现组件模块化？即如何使用 html和js文件实现模块化？上网查，于是发现了如下几种方案；

1. 使用html 模板标签；
即在主html中，使用template标签包裹html元素段，再以唯一id的方式标记该模板，在需要加载该模板的地方以id去匹配的方式。template标签作为html的保留标签，其在html加载的时候完全不会去解析其中内容，非常适合模板式编程。

声明：

<body>
   ......
   <template id="one-component">
       这里包裹了很多元素。
   </template>
 </body>

使用：

Vue.component('home', {
    template: '#one-component',
    data: () => {
        return {
        }
    }
 }})

所以我们要实现一个组件，可以再主html中增加一个template块，再新建一个js文件，再该文件中引用对应的template，即可实现模块化。

我们很快就能发现一个问题。html代码块并没有像.vue文件一样独立分开。我查找过很多方式。由于html元素的限制，我们没办法让template标签脱离文档流单独存在。最后我终于找到了一种方式，就是使用Vue加载异步组件的支持。

2. 文件化html,使用vue异步组件的方式加载；
第一步，将要声明的组件模板单独写成一个html。注意该html的根元素会作为vue的根元素使用，所以遵从vue的根元素规则，只能有一个根元素。

one-component.html 内容如下

<div>
   //--这里是一系列元素
</div>

第二步创建一个one-component.js脚本内容如下


Vue.component('oneComponent', function (resolve, reject) {
    $.get("./components/one-component.html").then(function (res) {
        resolve({
            template: res,
            data: () => {
                return {
                }
            },
            mounted: function () {
                
            }
        })
    });

});

第三步，在主html中引入该组件。注意，ajax请求的函数只会在使用到改组件的时候才会调用，例如我的html中使用了oneComponent组件

<body>
<one-component></one-component>
</body>

这样进入内部函数，最终使用ajax读取one-component.html，内部的html元素片段自动作为template的内容，这样就声明了组件。

四、结语

使用了上面的方式二，可以实现组件的模块化声明。但是有一种情况我还没有解决。就是当我使用了vue-router路由的时候，上述方式2并不能适用，只能使用template的方式（同步组件）。我的源码中也是这样做的。大概原因是异步组件和路由可能不能很好的兼容，具体问题我还没有解决，希望看到这篇文章的广大博友们能多提些意见和解决方式。

一个简单的专家管理系统源码：https://github.com/worlddai/expertsSystem

使用CDN的方式使用Vue 和 iview构建vue项目