net MVC +Vue.js+Element UI 筆記

最近項目需求，要在MVC里用Vue 與 Element UI,故而做個筆記來記錄一些遇到的問題和處理思路

（方式比較麻瓜，如果不是臨時用的話，建議還是學一下Vue-cli,新項目還是老老實實前后端分離吧）

-----------------------------------------------------------------------------------------------

通常想在mvc項目里用vue,就是想在cshtml頁面里使用Rozor和MVC框架機制的同時使用雙向綁定節約開發時間...

基於MVC的話，能用到MVC的服務器端渲染,Session，驗證，路由機制等等還是非常的嗨皮的。

然而直接<script>引用vue到MVC的話，比較煩的是在做可復用Component和JS文件的封裝上沒webpack那么方便

如果不依賴Node的話，直接引用Script即可。

 

例如在MVC _Layout.cshtml中引用：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入樣式 --> 
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 
<!-- 引入組件庫 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>

 

 

 

PS：MVC Core里有個SPA Service 是一個對WebPack的包裝，有各種Vue,React等模版。（但是Vue組件里用不了Rozor/Blazor語法）

不過根據微軟一貫的尿性，這種旁支模板一般不會再更新了，有興趣的同學可以看看(強行把SPA跟接口再次封裝到一個SLN里，非常生硬~)

https://stackoverflow.com/questions/39478855/how-to-setup-asp-net-core-vue-js

使用Net Core 的SPA的好處還是用一些的例如CORF/font反抓包這些功能

筆記一：

　　MVC里

　　可復用Dialog Component做法思路 VueScript.cshtml：

@{
    Layout = null;
}
<script>
    @{ 
        string template = Html.Partial("~/Views/Dialog/Com_AddDatabaseDialog_Template.cshtml").ToString().Replace("\r\n","").Replace("\n","");
    }
    var Com_AddDatabaseDialog = {
        template: '@Html.Raw( template )',
        props: ['bDefOpen'],
        created:function()
        {
        },
        beforeUpdate: function () {
        },
        computed: {
        },
        data: function()
        {
            return {
                m_bOpen: this.bDefOpen
            };
        },
        methods: {
            }
        }
    };
</script>

 

@Script("復用組件路徑")

var Vue_Main = new Vue({
  el: '#app',
  components: {
    'component-a': Com_AddDatabaseDialog
  }
})