app开发公司q1654534794下拉推广,佛山网站优化什么价格,门户网站维护方案,服装店网站建设思路简介以前我们总是喜欢用服务端渲染前端#xff08;虽然也有htmlajax这种做法#xff09;#xff0c;后来node诞生了#xff0c;前端工具链#xff08;不如说生态#xff09;诞生了#xff0c;大家都开始了前端的重构之路#xff0c;本文将以一简单案例介绍下我们是如何… 简介以前我们总是喜欢用服务端渲染前端虽然也有htmlajax这种做法后来node诞生了前端工具链不如说生态诞生了大家都开始了前端的重构之路本文将以一简单案例介绍下我们是如何在.net core 中使用vue。作者卢伟背景最近在做一个项目有前端也有后端基于这辈子再也不可能写es5了原生js还是很重要滴所以毅然决然的放弃了采用服务端渲染前端但是呢基于项目前期的规模不大所以考虑把前后端放在一个repo里边当然发布也是同一网站路径咯。这样有一个好处就是不用考虑跨域的问题将来如果分离重构的话也不困难只需把跨域问题解决即可无论是.net core的cros还是Nginx反代都可以很好的解决跨域问题。react、angular、vue其中我最熟悉的就是vue所以采用了vue全家桶来实现前端业务。在我们的项目中我将vue的打包发布集成到了.net core编译中也就是说在编译.net core 项目的同时完成了前端的npm install 和npm run build。下文将会以一个简单实例实现.net core 集成vue。源码地址: https://github.com/WalkerLu/DotnetCoreWithVue.git。要求需要你的计算机安装有• .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 初始化vuevue 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 DotnetCoreWithVuenpm install4. 校验项目是否初始化成功。npm run dev在浏览器中打开http://localhost:8080,看到如下页面代表vue项目初始化成功。同步构建前端后端通过编辑项目文件在项目文件编译前先执行npm命令。1. 在vs 2017 中选中.csproj文件右键修改。2. 在.csproj 文件中添加如下代码即表示在构建之前先执行 npm install 和npm run build。Target NamePrecompileScript BeforeTargetsBeforeBuild Exec Commandnpm install / Exec Commandnpm run build //Target3. 编译查看结果可以在输出控制台查看日志。查看生成目录修改webpack生成路径在asp.net core 项目中我们习惯将静态文件放到wwwroot 目录下现在我们只需修改下webpack 配置文件即可。1. 修改config/index.js 文件。2. 重新编译查看生成文件路径。前后端交互1. 修改controller的第一个方法将返回数据第一个改为dotnet core with vue。cd DotnetCoreWithVuenpm install// GET api/values[HttpGet]public ActionResultIEnumerablestring 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全家桶的同时又希望可以代码可以一键式编译的话或许可以试试这种方式。end原文地址: https://devopshub.cn/2018/08/30/dotnetcore-vue/.NET社区新闻深度好文欢迎访问公众号文章汇总 http://www.csharpkit.com
