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

一、前提

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

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

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

二、构建项目

1、进入项目文件夹

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

2、生成项目

执行 vue init webpack MyBill

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

3、查看

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

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

4、初始化项目 
cd mybill 
npm install

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

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

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

三、结构介绍

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

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

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

1、 发布 
npm run build

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

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

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

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

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

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

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

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