大家好，我叫Andrey Yakovenko，我是Digital Design的网络开发人员。
我们公司有许多使用
sitefinity网站内容管理
系统 （简称CMS）实施的项目。 本文前面已经描述了使用它的原因。 CMS通常是一个多页应用程序，今天我将讨论哪些前端框架可以添加到Sitefinity解决方案中以及如何实现。
抒情离题
尽管sitefinity具有板载Angular.js，但由于源代码封闭，因此无法集成其他框架。 但是，这并不妨碍我们使用其他框架的功能。
本文中的示例不是万能药，主要是为了提供信息。
搜寻新的
由于Angular（虽然是第一个版本）已经在sitefinity中出现，所以我们希望通过React或Vue.js成为CMS的朋友。
这两个框架都有其自身的优势，并且具有各自的应用程序开发方法，但是我们将不做下一个比较。
快速浏览可能的解决方案后，发现了一个有趣的项目，该项目将用React编写的页面编译成静态html。 该解决方案不适合我们，因为我们不必失去SSR（服务器端渲染）的所有乐趣以及在客户端使用可执行代码的乐趣。
从言语到行动
与大多数CMS一样，Sitefinity允许您组成一个页面，其中包含用于显示内容（窗口小部件）的各种元素。 例如，我们将考虑将Vue.js嵌入到现成的小部件中的选项。
第一种方式（简单）
该方法包括将Vue.js作为库连接到主页模板。
之后，我们可以在任何位置的任何小部件中初始化应用程序。
一个简单的小部件的示例：
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, })
但是，这意味着整个小部件块都将用作模板，Vue.js将尝试对其进行插值，并且为了在正确的位置显示消息，有必要编写一个特殊的结构，如果某些原因导致js代码暂停，则将显示该结构。渲染之前，或者用户已禁用JavaScript。
解决此问题的方法是编写您自己的模板，该模板将复制小部件。 我们将扩展我们的组件。
一个例子：
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, template: '<div>{{msg}}</div>', })
现在，小部件的所有html代码都将替换为template字段中描述的模板，为了将数据从小部件模型传输到Vue，只需以任何方便的方式将模型转换为JSON并将其传输到data字段即可。
第二种方式（困难）
对于此方法，我们需要一个webpack，其最小配置为vue-loader。 另外，我们不需要使用html-extract-plugin 我们可以将模板存储在js代码中。
现在我们可以使用Vue的单文件组件。
单文件组件（
Sample.vue ）的示例：
<template> <div>{{msg}}</div> </template> <script> export default { name: 'Sample', data: function () { return { msg: 'Hello world', } }, } </script>
单文件组件比常规组件具有更多的样式选项，并且还减少了项目目录中的文件数量。
编写小部件组件后，我们需要对其进行初始化。
小部件初始化示例：
import Vue from 'vue' import Sample from '../Sample.vue' Vue({ render: function (h) { return h(Sample) } }).$mount('#widget-id')
但是在这种情况下，如果需要控制应用程序的初始化（例如指定选择器），则代码将由其自身执行，一种合理的解决方案是将应用程序包装在可以在页面上随时调用的方法中。
让我们扩展示例：
import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ render: function (h) { return h(Sample) } }).$mount(selector) } initWidget('#widget-id')
仍然需要将小部件模型数据传输到Vue.js组件。 通过将它们传递给Vue实例的数据对象之前，可以用JSON编写它们，然后将它们作为道具传递给组件，这很容易做到。
一个例子：
import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ data: function () { return { some: 'some value', } }, render: function (h) { return h(Sample, { props: data }) } }).$mount(selector) } initWidget('#widget-id')
小检讨
总之，我想说的是，每种提议的方法都有其自己的所谓的应用程序环境。 因此，第一种方法适用于快速集成应用程序的单个部分，例如按钮或表单，第二种方法则更高级，并且具有更大的功能来编写应用程序的各个部分和自包含页面。
但是，这两种方法都有一个很大的缺点-通过使用框架，有必要对SEO所依赖的页面部分做两次相同的工作。
另一方面，如果需要，可以使用这种方法来连接任何框架，库或使用原始JavaScript或jQuery编写自己的DOM管理器。
仅此而已。 谢谢您的关注。