.NET Core API框架实战（七） 集成Vue 实践

1、下载VS Code安装Node.js并依赖vue脚手架

如未安装：https://nodejs.org/dist/v8.11.4/node-v8.11.4-x64.msi

如安装node.js 检查是否安装成功

检查安装成功之后，输入命令： npm install -g vue-cli

安装完之后，输入vue检查是否安装成功，输入命令：vue --version 

最后，创建vue项目，输入命令：vue init 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测试

创建完之后，我们就可以运行项目了，输入命令：npm run dev，之后在浏览器输入地址：http://localhost:8080/#/

 2、集成.Net Core项目中

1、安装依赖

npm install

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

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

<Target Name="PrecompileScript" BeforeTargets="BeforeBuild">  

<Exec Command="npm install " />  

<Exec Command="npm run build" />

</Target>

4. 编译查看结果，可以在输出控制台查看日志。 

 5.修改webpack生成路径

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

修改config/index.js 文件

重新加载可以看到，文件进入wwwroot中；

6.前后端交互

新建Controller

 编辑helloworld.vue

请求插件使用axios，指令：npm install axios

封装axios

调用封装的$axios 

启动项目查看控制台

大功告成！！！！