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
启动项目查看控制台
大功告成!!!!