.Net MVC + Vue 初体验，MVC视图引入vue组件（不前后端分离）

有个项目需要用到Vue，之前做过Vue+Core API项目，想着挺简单的，没想到搞了半天才刚刚上手。如果都用Vue了，就建议考虑一下Vue+elementUI/Ant Design。可别又上Vue，又来jQuery，又来Bootstrap到时搞得一锅粥，就不好维护了。

此案例未使用cli，也未使用npm来管理

如果VS未识别Vue文件可下载Vue.js pack 扩展 (药翻强) ，根据电脑上的vs版本来搜索选择不同版本，下载下来直接安装即可(安装会有点慢)。vs2019 可直接用这个 github下载

1.首先现在文件头部引入vuejs，httpvueloader

xxxxxxxxxx
2
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>

2.在项目文件夹下新建文件夹Components，并添加 dataTable.vue 作为组件

xxxxxxxxxx
34
<template>
    <div class="panel-body">
        <div class="table-responsive">
            <table :class="tableClass">
                <colgroup>
                    <col v-for="(item,i) in tableprop" :key="i" :width="item.width" :align="item.align" />
                </colgroup>
                <thead>
                    <tr>
                        <th v-for="(item,i) in tableprop" :key="i">{{item.label}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,i) in tabledata" :key="i">
                        <td v-for="(propItem,propIndex) in tableprop" :key="propIndex">{{item[propItem.prop]}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
    module.exports = {
      name: 'dataTable',
      props: {
        tableClass:{
            type: String,
            default:'table no-margin'
        },
        tabledata: Array,
        tableprop: Array
      }
    }
</script>

3.在HomeController.cs新建一个DataTable Action，并建立相应试图DataTable.cshtml

DataTable.cshtml：

xxxxxxxxxx
76
@{
    ViewBag.Title = "Home Page";
}

    <div id="table-data">
        <data-table :tabledata="tableData" :tableprop="tableProps"></data-table>
        @*
        <!--测试路径时解开注释1-->
        <data-table2 :tabledata="tableData" :tableprop="tableProps"></data-table2>
        <data-table3 :tabledata="tableData" :tableprop="tableProps"></data-table3>
        <data-table4 :tabledata="tableData" :tableprop="tableProps"></data-table4>*@
    </div>

<script src="../../Components/11.js"></script>
@*<script src="~/Components/11.js"></script>  //.net路径可以*@
<script>
    var vm = new Vue({
        el: '#table-data',
        components: {
            'dataTable': httpVueLoader('/Components/dataTable.vue'),           //绝对路径可以
            /*
             //测试路径时解开注释2
            'dataTable2': httpVueLoader('../../Components/dataTable2.vue'),  //相对路径也可以
            'dataTable3': httpVueLoader('~/Components/dataTable3.vue'),      //.net路径不可以    习惯手动拖动文件进来的  这里需要注意一下
            'dataTable4': httpVueLoader('hello.vue'),          //在views文件夹下不可直接访问  也会报404    和当前csHtml同一路径  不可直接访问
             */
        },
        data() {
            return {
                tableData: [
                    {
                        id: 32,
                        name: '张三',
                        age: 18,
                        dd: 'wo',
                        yy: 'ni',
                        tt: 'zhe',
                        ee: '696',
                        uu: '8974',

                    },
                    {
                        id: 22,
                        name: '张5三',
                        age: 15,
                        dd: 'w1o',
                        yy: 'n2i',
                        tt: 'zh3e',
                        ee: '6496',
                        uu: '85974',
                    },
                    {
                        id: 11,
                        name: '张2三',
                        age: 163,
                        dd: 'w7o',
                        yy: 'n8i',
                        tt: 'z9he',
                        ee: '6966',
                        uu: '84974',
                    }
                ],
                tableProps: [
                    { prop: 'id', label: '#', width: '180', align: 'center' },
                    { prop: 'name', label: '姓名', width: '180', align: 'center' },
                    { prop: 'age', label: '年龄', width: '180', align: 'center' },
                    { prop: 'yy', label: 'YY', width: '180', align: 'center' },
                    { prop: 'dd', label: 'DD', width: '180', align: 'center' },
                    { prop: 'tt', label: 'TT', width: '180', align: 'center' },
                    { prop: 'ee', label: 'EE', width: '180', align: 'center' },
                    { prop: 'uu', label: 'UU', width: '180', align: 'center' },
                ]
            }
        }
    })
</script>

4.修改WebConfig配置文件，添加以下配置让MVC可以识别.vue文件

xxxxxxxxxx
5
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".vue" mimeType="application/x-javascript" />
    </staticContent>
  </system.webServer>

5.运行即可

这里有几个比较重要的点，值得说一下

1.httpVueLoader。在未使用vue-cli搭建项目的情况下，我们可以使用这个将组件引入到我们的页面中

2.修改WebConfig文件，添加mimeMap使得MVC可以识别.vue文件。未执行该步骤会导致404的问题，即使httpVueLoader引入的路径是正确的

3.httpVueLoader的引入路径。详情看下图↓↓↓

httpVueLoader接受相对路径和绝对路径，但不可使用.net特有的绝对路径(~/Components/.....)，也不可以直接引用Views文件夹下的vue文件，一般都是在项目下新建一个文件夹用来放Vue组件。

参考博客：

vue使用http-vue-loader 来运行.vue格式的文件

在vs2019里使用http-vue-loader加载vue文件时提示文件找不到404

完整项目代码已传github：https://github.com/logerlink/NetMvcVueTest