​kendo 的mvvm 是最早使用mvvm模式的的一种前端架构技术，也是非常优秀的一款mvvm组件，主要是欧美和印度人喜欢使用。后来流行的vue与react很多mvvm开发模式和设计理念都是来源和借鉴了kendo 的mvvm思想。通过对kendo的mvvm学习，我们可以更容易的掌握和理解前端mvvm使用与演变过程，可以让读者更好的了解和学习前端的mvvm开发模式。kendo 非常符合外国软件工程们开发逻辑，但是我们中国人学习起来多多少少总有点格格不入的感觉。

第一章 启动调试工程

​学习kendo mvvm模式需要下载作者为大家提供的kendo练习代码，这样可以方便大家更好的理解kendo使用和本文的示例代码。大家可以在下载的练习示例代码中进行调试与实验方便更快的掌握kendo mvvm编程思想与编程技巧。

​ 项目的示例代码下载地址：https://pan.baidu.com/s/1Q6pbC2SR70HKCeVXgOGUPQ
提取：1234

项目结构

​ 打开练习kendoDome项目，可以看到以下文件与文件件。

kendoDome                      
   |--dist                     //编译生成的代码保存在这个文件夹下，
   |						   //在webpack.config.js中设置
   |--images                   //工程使用到的公共图片
   |--libs                     //html页面中引入的js第三方架构包
   |--node_modules             //node工程开发类包
   |--src                      //工程业务逻辑代码
   |--styles                   //工程业务样式
   |--.eslintrc                //工程代码质量监控配置文件
   |--package.json             //node工程配置文件
   |--sonar-projec.properties  //代码检测配置文件
   |--tsconfig.json            //typescript 工程配置文件
   |--webpack.config.js        //打包，编译，开发测试运行配置文件

启动运行工程项目

进入到kendoDome项目目录中，输入npm run dev 命令启动项目，进入到开发模式中。

cd ./kendoDome
npm run dev 

路由routes设置

​在项目工程中routes.ts文件为路由配置类负责配置所有项目模板与业务逻辑类路径引用与全局调用。在src文件夹下找到routes.ts文件。

src
 |--routes.ts    路由控制类

​ 如果需要新增示例模块，在路由中配置自己代码引用与模块地址，并建立它们的对应关系。

import zhttest1 from './zhtbs/test1/index';//业务连接类地址
export const routes: Route[] = [ //路由地址
    //测试例子
   {
        url: '/zhtbs/test1',//菜单中引用路径
        callback: zhttest1,
    }
];

菜单设置

​ 路由信息配置完成后，我们需要在菜单类中将这组业务引用配置到框架的菜单中来，我们在src文件夹中的home文件夹下找到home.ts 类。

src
 |--home
     |---home.ts  //菜单主体框架代码

​ 在home.ts类中设置菜单结构。找到data 属性元素按照对应数据结构关系设置菜单内容。

const data= [
    {name:'项目一',
        subMenus:[
        {name:'菜单一',route:'/zhtbs/test1'},<--------------------------- |
        {name:'菜单二',route:'/zhtbs/test7'}                              |
    ]},                                                                  |
    {name:'项目二',                                                       |   
        subMenus:[                                                       |
        {name:'菜单三',route:'/zhtbs/test8'}                              |
        ]}                                                               |
];                                                                       |
				routes.ts(路由类)	                                       |			   
------------------------------------------------                         |
import zhttest1 from './zhtbs/test1/index';//业务连接类地址                 |
export const routes: Route[] = [ //路由地址                                |
   {                                                                     |
        url: '/zhtbs/test1',//菜单中引用路径  <-----------------------------|
        callback: zhttest1,
    }
];

项目url访问代理设置

​ 在项目的webpack.config 文件中设置外部服务访问url代理设置。

 devServer: {
        port: 8089,
        proxy: {
            '/oauth': {
                target: 'http://localhost:8888/',
            },
            //服务代理的web项目的地址
            '/zhtbs': {
                target: 'http://localhost:8077/',
                pathRewrite: { '^/zhtbs': ''},            
            },
            '/img': {
                target: 'http://localhost:8888/'
            },
        },
    },