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