Question

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

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

我的问题/问题是，在我的cshtml视图文件中使用单个文件组件（Vue），我是如何获得最佳设置的。

所以，假设我的网站上有一个部分，我希望显示用户的订单。布局，导航等是由我的ASP代码设置的。我有一个当前页面的CSHTML视图，非常香草：

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

<div id"app">

</div>

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

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

这是基本设置;

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 build放入cshtml页面。

在ASP项目中使用VueJS

1 个答案: