在 ASP 项目中使用 VueJS

Posted 2023-02-23

【中文标题】在 ASP 项目中使用 VueJS

【英文标题】：Using VueJS in a ASP project

【发布时间】：2018-03-04 21:31:18

【问题描述】：

目前正在开发一个 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 文件中？

【问题讨论】：

Best approach when replacing jQuery with VueJS 2 in multi-page existing .NET MVC application的可能重复

【参考方案1】：

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

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

【讨论】：

vueify for Gulp 不做同样的事情吗？还是？

是的，但是您需要构建一个可分发的文件。 vuejs.org/v2/guide/single-file-components.html我建议遵循这个计划