Vue.js开发记录-优快云博客

本文详细介绍了如何使用Node.js和Vue CLI搭建项目环境，包括设置淘宝镜像源、安装Vue CLI、启动项目等步骤。同时，深入解析了Element UI前端框架的应用，如表格数据动态展示、饼图信息接口数据转换、异常处理及页面逻辑实现，适合初学者快速上手。

一、环境安装

1.安装node

http://nodejs.cn/download/

2.设置淘宝镜像源

临时
npm --registry https://registry.npm.taobao.org install express
永久
npm config set registry https://registry.npm.taobao.org

3.安装vue-cli

安装 2
npm install -g vue-cli

安装 3
npm install -g @vue/cli

4.启动项目

npm run serve

二、开发过程

页面元素分析：

1.单选按钮

2.日期选择

3.需求链接展示 a标签

4.备注、测试问题、风险输入框

5、bug接口信息获取展示

6.应用信息动态展示表格

7.提交取消按钮发送请求

页面逻辑分析：

进入页面查询有无测试报告数据

有则读取信息展现，没有则读取bug信息和应用信息

提交后成功则刷新页面，失败则报错

三、技术要点

1.Element UI 前端框架

（1）elemnet 表格数据动态展示

<el-table :data="tableData" border style="width: 100%">
  <el-table-column prop="app_name" label="应用">
  </el-table-column>
  <el-table-column label="sql文件">
    <template slot-scope="scope">
    <a v-for="item in scope.row.test_files" v-if="item.type=='sql'" :key="item" :href="item.link">{{ item.name }}<br></a>
    </template>
  </el-table-column>
 <el-table-column label="数据文件">
    <template slot-scope="scope">
    <a v-for="item in scope.row.test_files" v-if="item.type!='sql'" :key="item" :href="item.link">{{ item.name }}<br></a>
    </template>
 </el-table-column>
</el-table>

2.页面逻辑代码

（1）饼图信息接口对象格式转换为数组格式

//对象转数组
var legendData2 = Object.keys(DataComponents);
//拷贝值
var selected2 = {
    ...DataComponents
};
//构造需要展示的数据
for (var k in selected2) {
    selected2[k] = true;
}
//模块名和数量 构造一个对象
var seriesData2 = [];
for (var m in DataComponents) {
    var sdict3 = {
        name: m,
        value: DataComponents[m]
    };
    seriesData2.push(sdict3);
}

（2）异常处理

try {
    this.form.DemandLink = DemandLink.split(';');
} catch {
    this.form.DemandLink = DemandLink;
}

（3）地址链接传参

let IssueId = this.$route.query.id;

转载于:https://www.cnblogs.com/maoxianfei/p/11019309.html