2017-09-23 26 views
1

現在、ASP MVCサイトを開発中です。 サイトの一部のセクションでは、リスト、フォームなどを表示するためにVueJSを使用します。 プロジェクトの設定は、TypeScriptを使用するBower、Grunt、標準C#ASPプロジェクトです。ASPプロジェクトでVueJSを使用

これは私の初めてのVueの使い方であり、簡単なものはかなり前進しています。フォームを使ってページを設定し、WebServiceなどからデータを取得する。

私のcshtmlビューファイルで単一のファイルコンポーネント(Vue)を使用するための最良のセットアップを得るにはどうすればよいですか。 。

私のサイトには、ユーザーからの注文を表示するセクションがあります。 私の存在するASPコードでレイアウト、ナビゲーションなどが設定されています。現在のページ、かなりバニラのCSHTMLビューページを持っています。

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

<div id"app"> 

</div> 

これはexcistingビューページ用です。このページでは、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ファイルに含まれていますか?

+0

[複数ページの既存の.NET MVCアプリケーションでjQueryをVueJS 2に置き換えるときのベスト・アプローチ](https://stackoverflow.com/questions/42541315/best-approach-when-replacing-jquery-with- vuejs-2-in-multi-page-existing-net-mvc) – Bert

答えて

0

シングルファイルコンポーネントをビルドするには、webpackを使用して開発する必要があります。

これに関するVueのドキュメントを参照してください。 Vue Cliを使用してWebパックのビルドをcshtmlページにドロップします。

+0

Gulpのvueifyは同じではないのですか?または? – brother

+0

ええ、でも、配布可能なファイルをビルドする必要があります。 https://vuejs.org/v2/guide/single-file-components.htmlこのプランに従うことをお勧めします – Shay

関連する問題