Asp.net+Vue2构建简单记账WebApp之三(使用Vue-cli构建vue.js应用)

Asp.net+Vue2构建简单记账WebApp之一(设计)
Asp.net+Vue2构建简单记账WebApp之二(使用ABP迅速搭建.Net后台)
Asp.net+Vue2构建简单记账WebApp之三(使用Vue-cli构建vue.js应用)
Asp.net+Vue2构建简单记账WebApp之四(vue.js构建记账主页面)
Asp.net+Vue2构建简单记账WebApp之五(vue.js构建记账页面)
Asp.net+Vue2构建简单记账WebApp之六(vue.js构建记账统计页面)
源码下载

一、前提

1、安装好node.js
2、安装好npm
3、安装好vue-cli

这里写图片描述

如何安装这里就跳过,网上一大推。
当然装上npm的淘宝镜像更好

二、构建项目

1、进入项目文件夹

这里写图片描述

2、生成项目

执行 vue init webpack MyBill

这里写图片描述

3、查看

利用vue-cli 构建的文件夹如下

这里写图片描述

4、初始化项目
cd mybill
npm install

这里写图片描述

5、 用node运行试试
npm run dev 执行后会自动打开浏览器
退出的话,可以直接Ctrl+C,按两次c。

这里写图片描述

三、结构介绍

1、使用自己喜欢的工具打开这个项目文件夹
我喜欢使用webstorm

这里写图片描述

四、发布(asp.net 就只用发布的东西)

1、 发布
npm run build

这里写图片描述
这里写图片描述

2、在我们.net项目中引入发布的内容
对于调试,我们引入也可以,因为构建的时候已经在我们的项目下面了。只要知道位置就可以的。

这里写图片描述

3、 在asp.net 项目中访问这个页面
启动调试,浏览器输入相对页面地址可以看见一片空白,我们哪里错了?

这里写图片描述

4、 修改node发布配置后从新发布项目

这里写图片描述

这里写图片描述

  • 0
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值