PDF发票解析并将信息回填到前端（2）前端页面

本人前端基础薄弱，此处的前端仅仅是一个练习展示

1. 创建一个前端项目

1. 打开终端使用以下命令创建一个基于webpack模板的新项目

   vue init webpack my-project

输入命令之后一直点击enter知道项目创建完成即可

2. 进入项目，安装并运行

   $ cd my-project  // 进入项目
   $ npm install  // 安装
   $ npm run dev // 运行项目

3. 成功执行以上命令之后访问 http://localhost:8080/，输出结果如下图
   

4. 使用VSCode打开项目，下面是项目的目录结构。
   在src，components下创建PDF.vue 文件
   

5. PDF.vue 的代码如下

6. 在 router 目录下的 index.js 中引入组件并定义组件规则
   
   
   

7. 在终端使用以下命令运行该项目

   npm run dev

8. 访问地址localhost://8081/#/pdf，点击按钮上传并解析文件，最终结果如下