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发布配置后从新发布项目