Vue.js 使用 Visual Studio 2017 開發

小小的試過了一下React,所以也來試一下Vue
一樣打開visual studio 2017 建立一個asp.net web 應用程式

選擇MVC專案

使用NeGut套件

輸入vue 並安裝

安裝完成後如圖,會多出兩個vue的檔案

在HomeControl建立新的Action VueIndex

按右鍵,建立一個view VueIndex.cshtml

 在Script 下建立一個Vue的資料夾,再按右鍵,建立Hello.js檔

完成之後的目錄結構

在Hello.js 裡key in ,Vue的語法

var app = new Vue({

    el: '#content',

    data: {

        message: 'Vue Hello World'

    }

});

在剛剛的建好的VueIndex.cshtml,輸入下圖的內容


<p id="content">{{ message }}</p>
content :會對應到Hello.js裡 el: '#content'
message:會對應到Hello.js裡 data 下的 message

建置之後跑一下,成功了哦!