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