专栏首页挖坑填坑Asp.net+Vue2构建简单记账WebApp之三(使用Vue-cli构建vue.js应用)

Asp.net+Vue2构建简单记账WebApp之三(使用Vue-cli构建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 条评论
登录 后参与评论

相关文章

  • 人工智能学习 - 监督式学习

    https://software.intel.com/zh-cn/ai/courses/machine-learning

    易兒善
  • nvm管理nodejs版本。

    访问:https://github.com/coreybutler/nvm-windows/releases页面直接点击 nvm-setup.zip进行下载 ...

    易兒善
  • 人工智能简介- 数据收集和增强

    易兒善
  • 小程眼里的微服务

    最近一直在研究微服务有了一点小小的成果,前段时间给公司部门同事做了分享,在此将ppt发出来与大家分享。

    小程故事多
  • 数据库

    脏读:当事务A正在访问数据并且做了修改(‘工资2000元’改成‘工资3000元’),但是还没来得及提交,这是事务B来访问数据并且使用了该数据(‘工资2000元’...

    大学里的混子
  • Git仓库初始化

    JavaEdge
  • 用WordPress搭建个人网站(3)

    叶应是叶
  • 告知服务器意图的 HTTP 方法1 GET:获取资源2 POST:传输实体主体3 PUT:传输文件4 HEAD:获得报文首部5 DELETE:删除文件6 OPTIONS:询问支持的方法一般网站只用G

    JavaEdge
  • 理论坞 | SWOT分析法 如何做战略分析?

    SWOT分析法,即态势分析法,就是将与研究对象密切相关的各种主要内部优势、劣势和外部的机会和威胁等,通过调查列举出来,并依照矩阵形式排列,然后用系统分析的思想,...

    宇相
  • 让cat命令有颜色得输出文件(ccat)

    今天讲一个命令,叫ccat,它和cat的区别就是当我cat一个文件的时候ccat可以根据文件的格式来高亮输出。就和这篇文章上面的图片一样

    bboysoul

扫码关注云+社区

领取腾讯云代金券