在ASP项目中使用VueJS

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

这是我第一次使用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文件中作为例子？

来源

2017-09-23 brother

[在多页现有.NET MVC应用程序中用VueJS 2替换jQuery时的最佳方法]（https://stackoverflow.com/questions/42541315/best-approach-when-replacing-jquery-with- vuejs-2-in-multi-page-existing-net-mvc） – Bert

您需要使用webpack进行开发才能构建单个文件组件。

查看Vue相关文档。使用Vue Cli并将Web包内置到您的cshtml页面。

来源

2017-09-23 14:32:13 Shay

对于Gulp来说，这样做是不是也一样呢？要么？ – brother

是的，但你需要建立一个可分发的文件。 https://vuejs.org/v2/guide/single-file-components.html我会建议遵循这个计划 – Shay

在ASP项目中使用VueJS

回答

相关问题