.net core 集成vue

要求

 

须要你的计算机安装有

 

• .net core 2.0以上版本

• node、webpack、vue-cli、vue （npm install 默认版本便可）

• visual studio 2017/vs code

 

初始化.net core 项目

 

1. 首先打开vs 17(vs code也行)新建一个asp.net core 项目DotnetCoreWithVue。

 

2. 选择API模板，如果想集成docker能够勾选下启用docker支持。关于docker的详细介绍可参考咱们的另外一篇文章使用TFS玩转Docker自动化部署。

 

使用vue-cli初始化vue 项目

 

• 若未安装node,点击下载连接:

https://nodejs.org/dist/v8.11.4/node-v8.11.4-x64.msi，双击安装便可。

• 若未安装vue输入命令行 npm install -g vue。

• 安装vue-cli npm install -g vue-cli。Npm慢的话可使用cnpm（淘宝npm镜像）或者yarn。

 

1. 打开命令行工具，这里直接使用的vscode的终端插件。

 

2. 用webpack 初始化vue

vue init webpack

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

https://vuejs-templates.github.io/webpack/

参数说明

? Project name  输入项目名称
? Project description 输入项目描述
? Author 做者
? Vue build 打包方式，回车就行了
? Install vue-router?  选择  Y 使用 vue-router，输入 N 不使用
? Use ESLint to lint your code? 代码规范
? Setup unit tests with Karma + Mocha? 单元测试
? Setup e2e tests with Nightwatch? E2E测试

 

3. 安装依赖

cd DotnetCoreWithVue
npm install

 

4. 校验项目是否初始化成功。

npm run dev，在浏览器中打开http://localhost:8080,看到以下页面表明vue项目初始化成功。

 

同步构建（前端+后端）

 

经过编辑项目文件，在项目文件编译前先执行npm命令。

 

1. 在vs 2017 中选中.csproj文件右键修改。

 

2. 在.csproj 文件中添加以下代码，即表示在构建以前先执行 npm install 和npm run build。

<Target Name="PrecompileScript" BeforeTargets="BeforeBuild">
  <Exec Command="npm install " />
  <Exec Command="npm run build" />
</Target>

 

3. 编译查看结果，能够在输出控制台查看日志。

查看生成目录

 

修改webpack生成路径

 

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

 

1. 修改config/index.js 文件。

 

2. 从新编译，查看生成文件路径。

 

先后端交互

 

1. 修改controller的第一个方法，将返回数据第一个改成：dotnet core with vue。

cd DotnetCoreWithVue
npm install
// GET api/values
[HttpGet]
public ActionResult<IEnumerable<string>> Get()
 {
  return new string[] { "dotnet core with vue", "value2" };
  }  

 

2. 修改HelloWorld.vue，添加以下代码，请求后端api，而后编译项目。这里使用的requst 为小编封装的axios，各位感兴趣的话能够直接去github 查看代码 

https://github.com/WalkerLu/DotnetCoreWithVue/blob/master/DotnetCoreWithVue/src/utils/request.js

 mounted () {
 request({ 
   url: 'api/values',
   method: 'get'
   }).then(response => {
  console.log(response)
  this.msg = response.data[0]
    })
     }

 

3. 从新编译项目

请求http://localhost:40051/#/ 验证代码，端口号视应用程序配置需自行修改。

 

总结

 

至此.net core 集成vue的基本操做都完成了，其中用的技术（.net core、vue、router、webpack、es6…）展开了来说均可以出一个系列了，固然网上也不乏文档资料。故此文的的侧重点在于如何开始dotnet core with vue ？对于技术细节也没有深刻探讨，若是读者有.net core 获取vue 前端方面的话题或问题欢迎你们积极留言评论，咱们一块儿探讨学习。固然咯，重构前端也好，先后端分离也好都须要切合实际的选择最合适本身的方案。若是恰好你既须要同时编写前端和后端，且想使用VUE全家桶的同时又但愿能够代码能够一键式编译的话，或许能够试试这种方式。