.netcore mvc with vue template

准备工作

新建工程

必要库

检查node、webpack、vue-cli、vue 等是否已安装，如果没有，使用npm install -g 安装。

使用vue-cli初始化vue 项目

这里我选择了使用vue路由、ESLint语法规范，另外两个测试模块暂时用不到都填n，关于使用vue webpack 模板的介绍可参考文档。

安装依赖项

npm install

校验项目是否初始化成功

npm run dev

构建工程

与后端同时编译

打开NotesMVCVue.csproj文件，添加如下代码。

修改webpack生成路径

在asp.net core 项目中我们习惯将静态文件放到wwwroot 目录下，现在我们只需修改下webpack 配置文件即可。

1. 修改config/index.js 文件。
   
2. 生成项目，wwwroot目录如下。
   

前后端交互

安装axios

npm install axios --save-dev
--save-dev以省掉手动修改package.json文件的步骤。

创建一个方法，返回Json数据

在HomeCotroller中添加如下代码

    public JsonResult GetPersonInfo()
    {
      var person = new
      {
        Name = "张三",
        Age = 22,
        Sex = "男"
      };
      return Json(person);
    }

引入axios

在main.js中引入axios。由于在其他组件中无法使用axios命令，所以需要将axios改写为Vue的原型属性。

import axios from 'axios' //引入axios
Vue.prototype.$ajax=axios //修改Vue的原型属性

前端设置

在HelloWorld.vue中添加如下代码

    mounted() {

      //GET
      this.$ajax({
        method: 'get',
        url: '/Home/GetPersonInfo',
      }).then(response => {
        let _data = response.data;
        this.msg = "hello," + _data.name;
      }).catch(function (err) {
        console.log(err)
      })

    }

查看结果

重新编译项目，正常情况下会得到如下页面，表明配置成功。

修改默认路由

在.netcore中访问网站，其实默认路由到/home/index，现在我们希望直接访问/index.html。
方法：在startup.cs中，添加如下代码

      DefaultFilesOptions options = new DefaultFilesOptions();
      options.DefaultFileNames.Add("index.html");    //将index.html改为需要默认起始页的文件名.
      app.UseDefaultFiles(options);

      app.UseStaticFiles();

这是我们就可以访问到vue生成的页面了。

前端UI布局

引入iview

前端使用iview框架，首先引入

npm install iview --save-dev

mainjs导入

在main.js中添加

import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

修改App.vue

从iview官网拷贝任意一个示例代码，替换App.vue，重新编译。此处用的是布局页面。