net MVC +Vue.js+Element UI 筆記

最近項目需求，要用到Vue 與 Element UI。可是又不想用Node.js。就結合了Net.MVC來作項目開發。故而作個筆記來記錄一些遇到的問題和處理思路

用到MVC主要考慮是到 對 Node.js 不是特別瞭解。不想給本身埋坑。

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

然而結合MVC的話，比較煩的是在作可複用Component和JS文件的封裝上沒Node.js那麼方便。

若是不依賴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等模版。

不過根據微軟一向的尿性，這種旁支模板通常不會再跟新了，有興趣的同窗能夠看看(強行把頁面跟接口再次封裝到一個SLN裏，很是生硬~)

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

 

 Note：不得不吐槽，Vue.js簡直和Flash Flex一個設計思路呢

筆記一：

　　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
  }
})