Vue.js

一、使用之前，我们先来掌握3个东西是用来干什么的。 npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装） 开始： 如图，下载8.9.3 LTS （推荐给绝大部分用户使用） 双击安装 可以使用默认路径，本例子中自行修改为d:\nodejs 一路点Next 点Finish完成 打开CMD，检查是否正常 再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs 先如下图建立2个目录 然后运行以下2条命令 npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache" 如上图，我们再来关注一下npm的本地仓库，输入命令npm list -global 输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

介绍 这是一个可以将页面中的表格数据导出为 Excel 文件的功能组件，该组件一般与表格一起使用，将表格数据传给组件，然后通过点击组件按钮可将表格中的数据导出成 Excel 文件。 使用方法 由于封装该组件内部引用了 xlsx.js ， file-saver.js 和 elementUI ，因此在使用该组件时，请先安装如下依赖： npm install xlsx file-saver element-ui --save 安装好依赖后，只需将该组件文件夹 ExportExcel 导入到现有项目中即可使用。 使用示例 <template> <div id="app"> <export-excel v-if="list !== null" :list="list" :tHeader="tHeader" :tValue="tValue"></export-excel> </div> </template> <script> import ExportExcel from './ExportExcel' export default { name: 'app', components: { ExportExcel}, data() { return { list:null, tHeader:['Id', '告警类型', '告警内容', '告警时间（段）', '告警次数'], tValue:[

前言 之前有个网友问我了一个很有价值的问题, 有关实现 数据可视化 的问题, 但是这个可视化问题不是一般的柱状图, 折现图之类的,而是 不规则刻度的数据可视化 .所以笔者思考了一下决定自己实现一个 动态刻度可视化组件 的方案, 来解决这一类的需求. 正文 最初的需求是这样的: 我们只需要输入文字, 数值比例, 就能生成如上图所示的刻度图.但是作为一名有追求的程序员, 需要对问题抽象化, 形成通用的解决方案,所以我们开始重组需求: 由上图我们可以拆解为一下几个需求点: 支持数值自定义 数值单位自定义 支持刻度组件宽度自定义 支持刻度线数量自定义 支持刻度变化幅度自定义 传入已有进度比例,即激活区范围 支持刻度样式自定义 支持数值样式自定义 支持自定义说明文本以及说明文本自定义 以上就是笔者挖掘的通用需求,当然有其他需求也可以渐进的增加. 确认了以上需求之后,我们开始选择技术选型, 笔者之前常用的技术栈是 vue 和 react ,所以接下来我们初步确认该组件采用如下技术方案: react + typescript + umi-library 如果大家擅长使用 vue , 也可以, 笔者之前也写过如何搭建 vue 的 组件库 相关的文章,感兴趣可以学习了解一下, 其本质思想是一致的. 接下来我们开始实现动态刻度可视化组件. 如果对umi不熟悉的,可以参考笔者之前写的文章

（注：本文适用于有一定Vue基础或开发经验的读者，文章就知识点的讲解不一定全面，但却是开发过程中很实用的） 表单校验是前端开发过程中最常用到的功能之一，根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明 ~ 如下代码是 Form 表单校验的 demo 示例： <template> <div id="demo"> <el-dialog title="表单校验示例" :close-on-click-modal="false" :visible.sync="dialogVisible" width="600px"> <el-form ref="form" :model="form" :inline="true" :rules="rules"> <el-row> <el-col :span="12"> <el-form-item label="商品名称:" prop="productName"> <el-input v-model="form.productName" clearable placeholder="请输入"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="商品类型:" prop="productType"> <el-select v-model=

（注：本文适用于有一定Vue基础或开发经验的读者，文章就知识点的讲解不一定全面，但却是开发过程中很实用的） 表单校验是前端开发过程中最常用到的功能之一，根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明~ 如下代码是Form表单校验的demo示例： View Code 代码运行后会出现如下的弹框 首先对el-form标签中的几个关键属性进行说明， ref: 当前表单的唯一标识 model: 表单绑定的对象 rules: 字段校验规则 而最关键的一点是el-form-item标签中的prop属性，属性值必须与绑定的字段名称保持一致。 rules字段用来定义各个字段具体的校验规则，用法请查阅开篇的demo示例，其中required标识字段是否必填，message为校验提示语，trigger为单个校验触发方式；也可以通过validator字段自定义校验规则，方法validateProductName中对商品名称做了判空及长度校验，需要注意的是所有的条件分支都要做callback处理，否则校验可能会导致异常。 上述所有配置完成后就可以进行表单校验操作。 1、表单校验 　　校验方法如demo示例中的save方法所示。 　　如果只想对表单中的单个控件或部分控件进行校验，可以调用以下方法 　　this.$refs.form.validateField(‘productName’)