在 ASP 项目中使用 VueJS

Question

目前正在开发一个 ASP MVC 站点。 网站的某些部分将使用 VueJS 来显示一些列表、表单等。 项目设置是 Bower、Grunt、使用 TypeScript 的标准 C# ASP 项目。

这是我第一次使用 Vue，简单的东西非常简单。使用表单设置页面，从 WebService 获取数据等。

我的问题/疑问是，什么以及如何获得最佳设置，以便在我的 cshtml 视图文件中使用单文件组件 (Vue)。

所以，假设我的网站上有一个部分，我想在其中显示来自用户的订单。 布局、导航等由我现有的 ASP 代码设置。我有一个当前页面的 CSHTML 视图页面，非常普通：

@inherits MyViewPage<MyViewModel>
@{
    Layout = "~/Views/layout.cshtml";
} 

<div id"app">

</div>

这就是令人兴奋的视图页面。在这个页面中，我想包含一个 Vue 单文件组件。

以前我直接在 CSHTML 页面中使用标记，效果很好。但是当我想使用 Vue-router 时，维护不同的视图就成了一个问题。所以我应该将标记移动到一个组件中。

这是基本设置；

const page1 = { template: '<div>Page1</div>' }
const page2 = { template: '<div>Page2</div>' }
const routes = [
        { path: '/', component: page1 },
        { path: '/page2', component: page2 }
]

const router = new VueRouter({
    routes
})

var vm = new Vue({
    router,
        el: "#app"
})

假设我创建了一个名为 page1.vue 的 .vue 文件。这包含

<template>
my new page
</template>
<script>
    export default {
        name: '?',
        date: function() {

        }
    }
</script>

例如，我如何让这个文件包含在我的 CSHTML 文件中？

Answer 1

你需要使用 webpack 开发来构建单文件组件。

请参阅 Vue 文档。 使用 Vue Cli 并将 web pack 构建拖放到您的 cshtml 页面中。