目录
1、超链接的介绍：
HTML中的超链接是指可以将一个网页与另一个网页或其他资源进行链接的元素。通过超链接，用户可以点击文本、图像或其他元素，以跳转到另一个页面或打开其他资源，如文档、音频、视频等。超链接使用< a >标签来定义，其中href属性用于指定链接的目标URL。
例如：
<a href="https://www.bilibili.com/" target="_blank" title="点击可跳转到哔哩哔哩">哔哩哔哩a>
2、三种重要属性：
①.href属性
href属性是超链接标签必须存在的属性，href用于连接目标的URL地址。
②.target属性
target用于指定页面的连接方式。其中_self是默认值，即在当前窗口打开连接的打卡方式，_blank为在新窗口的打开方式。
③.title属性
title为超链接设置一些介绍信息。当鼠标移到设置了title属性的超链接上时，会显示title属性值的内容。
3、连接分类：
①.外部链接
外部链接是该网站网页跳转到另外一个网站的网页的连接。外部链接一定是 开头的。
例如：从自己的网页跳转到百度：
<a href="https://www.baidu.com/">百度a>
②.空链接
当我们没想好或不知道链接到哪个页面时，我们可以先写一个空超链接。超链接要求必须存在href,所以当我们要写超链接时，规定href属性为"#",不能空白。
<a href="#">空链接a>
③.各种网页元素链接
网页中的各种元素也可添加链接，如文本，图片，表格，音频，视频等可添加超链接。
例如：链接到一张QQ图标的图片:
<a href="图片路径"><img src="图片路径">a>
④.锚点链接
锚链接可以链接到本页面的特定位置，也可以链接到另一个页面的特定位置。其实现方式是添加锚标记。即：
< a href=“#名字”>跳转< /a>，"#"必不可少。
关于“#标记名”，它其实是页面中某一个标签的id属性值。也就是说，如果要跳转到网页的某个位置，就先在这个位置所在的标签设置id属性，然后就可以通过锚链接跳转到这个位置了。
当跳转到当前页面的特定位置时，直接将锚标记设为href属性的值。如：
<a id="aa">顶部a>
<p>这是一个段落p>
<p>这是一个段落p>
<a href="#aa">返回顶部a>
4、总结： 属性描述参数
href
来指定链接的目标,可以是其他网页的URL、同一网页中的锚点或文件的URL
URL
target
来指定链接在何处打开
_blank（在新窗口或标签页中打开）、_self（在当前窗口或标签页中打开）
title
来为链接添加鼠标悬停提示
提示的文字
Vue+Echarts构建可视化大数据平台实战项目分享（附源码）(上)
看了以上效果图，都只是静态的，还不过瘾，直接线上体验：jackchen0120.github.io/vueDataV/
高端大气上档次，是我追求的目标。如果感觉还不错的话，老铁们是不是赏个点赞鼓励一哈，作者才有动力继续写下去。好了，言归正传，想要快速做出酷炫大屏，让人眼前一亮，就请接着往下看。
项目架构
│ vue.config.js // webpack配置
├─public
│ favicon.ico // ico图标
│ index.html // 入口html文件
└─src
│ App.vue // 根组件
│ main.js // 程序入口文件
├─assets
│ ├─iconfont // 引用阿里巴巴矢量图标库
│ ├─img // 存放公共图片文件夹
│ ├─js
│ │ utils.js // 封装工具类方法
│ └─styles
│ │ base.scss // 基础样式文件
│ │ common.scss // 公用样式文件
│ └─fonts // 字体库文件
├─components
│ │ index.js // 封装组件库
│ ├─bar3d // 3D立体柱状图
│ ├─bgAnimation // 登录界面背景图动画
│ ├─cakeLinkage // 柱饼组合联动
│ ├─circleNesting // 圆环套圆环
│ ├─circleRunway // 环形跑道图
│ ├─colorfulArea // 多彩轮播面积
│ ├─colorfulRadar // 多彩雷达
│ ├─dynamicLine // 动态轮播折线图
│ ├─dynamicList // 动态列表动画
│ ├─flashCloud // 闪动云
│ ├─gauge // 仪表盘
│ ├─modal // 自定义全局模态框
│ ├─pyramid // 金字塔动画
│ ├─pyramidTrend // 金字塔趋势
│ ├─rainbow // 彩虹轨道图
│ ├─ringPie // 环形饼图
│ ├─ringPin // 环形气泡图
│ ├─rotateColorful // 旋转多彩图
│ ├─scanRadius // 扫描半径图
│ ├─scrollArc // 滚动弧形线
│ ├─seamless // 新闻无缝滚动
│ ├─sinan // 司南排名图
│ ├─staffMix // 人员占比
│ ├─szBar // 双轴柱状图
│ ├─toast
│ │ index.js // 注册全局消息提示框组件
│ │ index.vue // 自定义消息提示框模板
│ └─waterPolo
│ index.vue // 水球图、水波图
├─router
│ index.js // 单页面路由注册组件
├─store
│ index.js // 状态管理仓库未使用到
└─views
Home.vue // 酷屏首页统计图
Login.vue // 登录界面
复制代码技术栈功能模块准备工作windows 10系统下载安装 nodejs v10+ nodejs.org/zh-cn/代码编辑器工具 sublime text 3搭建开发环境（此处非小白可以忽略）
1） 打开命令行窗口，输入 node -v 查看，出现版本号说明已安装成功，如下图：
2） 使用以下命令安装vue-cli3
npm install -g @vue/cli
# 安装指定版本
npm install -g @vue/cli@3.11.0
# OR
yarn global add @vue/cli
复制代码3）安装完成，检查vue版本，如下图：
vue -V
复制代码4） vue-cli3 创建项目及运行
vue create woyouzhe
cd woyouzhe
npm run serve
复制代码在浏览器地址栏输入：:8080/
5）开发配置 在使用vue-cli3脚手架创建项目后，因为webpack的配置均被隐藏，当你需要覆盖原有的配置时，则需要在项目的根目录下，新建vue.config.js文件，来配置新的配置如下（含注解）：
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "/vueDataV/" : "/", // 部署生产环境和开发环境下的URL：可对当前环境进行区分
lintOnSave: false, // 是否在代码保存时进行eslint检测
productionSourceMap: false, // 是否在构建生产包时生成sourceMap文件，false将提高构建速度
devServer: { // webpack-dev-server 相关配置
port: 8081, // 端口号
hotOnly: false, // 取消热更新
// proxy: { // 使用代理
// '/api': {
// target: '//api.github.com', // 目标代理服务器地址
// changeOrigin: true, // 允许跨域
// pathRewrite:{
// '^/api': '' // 重写路径，需要设置重写的话，要在后面的调用接口前加上/api来代替target
// }
// }
// }
},
configureWebpack: {
// 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
externals: {
'jquery' : '#39;,
'echarts': 'echarts',
'axios' : 'axios'
}
}
}
复制代码在配置文件vue.config.js中添加webpack的externals对象，把不需要打包的依赖库（减少打包文件体积），直接按上面的方式写入。然后在index.html文件中引入CDN即可，如下图：
6） 公共样式，图片，字体，JS，统一存放在/src/assets/文件夹下，如下图：
js文件夹里面的utils.js文件的作用，如下图：
作者偷懒只针对酷屏首页组件库会用到，通常按照UI设计师提供的数据可视化屏幕尺寸都是宽：1920px，高：1080px，所以上面的配置也按照这个尺寸进行屏幕缩放。后续会专门讲数据可视化面板的合理布局。首页引用如下图：
iconfont文件夹存放图标文件，可以直接去阿里巴巴矢量图标库查找下载所需要的图标。
style文件夹存放base.scss（基本样式）和common.scss（组件库通用样式），直接在main.js文件引入即可，如下图：
功能设计和代码实现
按照上面的步骤完成脚手架构建，把需要的axios、vue-router、echarts、scss、jquery等依赖库引入和安装配置好，准备开始上路。
登录界面主要功能包含：背景图轮播、粒子动效、登录框抖动、自定义消息提示框等等。
利用css3动画属性animation实现轮播背景图的路径，使这个动画无限循环下去，以实现背景图自动轮播的效果。背景图轮播功能已封装注册全局小组件在components/bgAnimation目录文件，直接上代码：
复制代码如果对animation属性不熟，可以参考这个网站教程。
点击查看效果 这种粒子背景特效在Vue框架中实现不难，因为已经有大神帮我们做好了，我们只需引入到自己的项目中即可，作者推荐vue-particles插件，简单看一下使用，具体用法可以移步vue-particles官网。
复制代码消息弹框组件，默认3秒后自动关闭，可设置info/success/warning/error类型。效果如下图：
消息弹框功能已封装注册全局小组件在components/toast目录文件，代码如下：
{{ content }}
复制代码在components/toast/index.js目录文件中注册全局组件，如下图：
在main.js中全局引用，如下图：
在登录模板界面调用即可，如下图：
参数名 类型 说明 content String 内容 time Number 消失时间，默认3秒后消失 type String info/success/warning/error，默认info hasClose Boolean 是否含关闭按钮，默认false
最后
由于时间关系，文章写的仓促，难免会有些问题或BUG出现，愿意接受批评和指正。此次实战项目分享内容分为上下两篇文章，下一篇要分享的内容大概有：自定义全局模态框、首页设计布局、数字滚动、某个酷炫小部件开发等。
