在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

回答

相關問題