GitHub上的项目体验第一期——VueDataV
凡是过往，皆为序章
前言
今天又如往常一般打开GitHub的trending看vue的项目。不过今天有点不一样了。我突然想下载下来运行一下。之前收藏了许多GitHub的vue项目，但是都没记录下来。
项目地址：jackchen0120/vueDataV
项目介绍：基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。
项目效果：
碰巧我之前也使用过vue+echarts开发数据可视化平台，还写了《前端可视化echarts使用理解》。
下面我将详细记录使用过程以及使用体验；
使用过程
初始化
首先在jackchen0120/vueDataV下载项目，我一开始以为没多大的。结果有20.8M。用GitHub下载有些慢。
我记得以前我好像收藏过一些让GitHub下载加快的小技巧。
不过我没试过。
然后我解压后，用vscode打开，然后开始喜闻乐见的npm install；
科普一下，npm的历史：
程序员自古有社区文化，以前没GitHub的时候，前端是通过网址来共享代码的，比如说jQuery，就是在jQuery的官网下载；
后来GitHub兴起后，社区的人就在GitHub上使用下载功能，但是麻烦的是网站依赖的代码越来越多，程序员一会在jQuery下载，一会在bootstrap下载。于是一个大佬用node.js写了一个npm将这些代码集中到一起来管理。
过程开始出现问题。首先是
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-10-02T06_45_57_140Z-debug.log
然后是在此npm install
npm ERR! cb() never called!
npm ERR! This is an error with npm itself. Please report this error at:
npm ERR! <https://npm.community>
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-10-02T07_11_02_101Z-debug.log
然后我试一下yarn install
error Couldn't find package "webpack@^4.0.0" required by "@vue/cli-plugin-babel@^4.3.0" on the "npm" registry.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
意思是没有在npm仓库发现cli-plugin-balel的webpack包；
然后我yarn add @vue/cli-plugin-bale@^4.3.0；
在此科普一下npm和yarn：npm 和 yarn 你选哪个？、我们来解释一下npm和yarn的区别。
yarn是Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。
- npm 出现之前：前端依赖项是保存到存储库中并手动下载的
- 2010：
npm发布并支持nodejs- 2012：
npm的使用量急剧增加——主要是由于Browserifys浏览器的支持- 2012：
npm有了一个竞争对手bower，它完全支持浏览器- 2012-2016：前端项目的依赖项数量成倍增加
- 2012-2016：构建和安装前端应用变得越来越慢
- 2012-2016：大量（重复的）依赖项存储在神奇的
node_modules内的嵌套文件夹中☢️- 2012-2016：
rm -rf node_modules成为前端开发人员最常用的命令。- 2015：
bower输给了npm- 2015：
node_modules被修改为扁平化的文件结构！- 2016：
left-pad成为当时的新闻头条- 2016：
yarn发布- 支持
npm和bower仓库yarn.lock能够锁定安装的版本并提供确定性的依赖关系。不再rm -rf node_modules！yarn install花费的时间是npm install的一半（不使用缓存的前提下）- 缓存和脱机模式使构建过程几乎不花费时间
- 2016：
npm发布shrinkwrap- 尝试处理依赖项锁定
- 不幸的是，一些错误和超出其管理能力的承诺导致该工具的声誉下降
- 2017：
npm5 发布package-lock.json是他们的新工具，shrinkwrap被放在一边package-lock.json开始与yarns锁定文件竞争- 2018：
npm ci发布- 直接用
package-lock.json构建代码- 没有代价高昂的依赖项安全性分析和版本分析
- 大大减少了在构建服务器上的构建时间！
- 2018：
npm6 发布 ♀️npm检查要安装的依赖项中的安全漏洞yarn和npm的构建时间不再有显差异
项目结构梳理
首先在package.json中看看依赖包，发现core-js、vue-seamless-scroll的两个插件我没用过，好像和滚动相关。
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vue-seamless-scroll": "^1.1.21",
"vuex": "^3.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.3.0",
"@vue/cli-plugin-eslint": "^4.3.0",
"@vue/cli-service": "^4.3.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"vue-count-to": "^1.0.13",
"vue-particles": "^1.0.9",
"vue-template-compiler": "^2.6.11"
},
然后打开main.js看看引入了哪些组件。然后就看到了App.vue；
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vueParticles from 'vue-particles'
import Vcomp from './components/index'
import Toast from './components/toast'
import '@/assets/styles/base.scss'
import '@/assets/styles/common.scss'
import '@/assets/iconfont/iconfont.css'
接着看路由router/index.js。看到login、home、brand三个界面的路由
const routes = [
{
path: '/',
name: 'Login',
component: () => import('@/views/Login.vue'),
meta: {
title: '登录界面'
}
},
{
path: '/login',
redirect: '/'
},
{
path: '/home',
name: 'Home',
component: () => import('@/views/Home.vue'),
meta: {
title: '酷屏首页统计图'
}
},
{
path: '/brand',
name: 'Brand',
component: () => import('@/views/Brand.vue'),
meta: {
title: '公司品牌介绍'
}
}
]
然后看看vuex的store/index.js。看到state、mutations、actions、modules。
state: {
},
mutations: {
},
actions: {
},
modules: {
}
看完这些看views文件夹，这个文件夹中有login.vue、home.vue、brand.vue三个组件。也分别对应那三个路由。其中的home.vue组件中引用了许多组件
<template>
<div class="home-container">
<div class="wrap" ref="editor">
<div class="top"></div>
<sinan />
<seamless />
<pyramid />
<scrollArc />
<szBar />
<ringPin />
<rotateColorful />
<circleRunway />
<scanRadius />
<cakeLinkage />
<pyramidTrend />
<dynamicLine />
<staffMix />
<flashCloud />
<ringPie />
<colorfulRadar />
<dynamicList />
<bar3d />
<colorfulArea />
<rainbow />
<gauge />
<waterPolo />
<circleNesting />
<div class="divider"></div>
</div>
</div>
</template>
接着我们看公共组件的文件夹components。点开其中最小的一个组件waterPolo/index.vue。作者写这个组件写得挺舒服的，开头就可以知道是什么图。
<!--
描述: 水球图
作者: Jack Chen
日期: 2020-05-03
-->
<template>
<div class="wrap-container sn-container">
<div class="sn-content">
<div class="sn-title">水球图</div>
<div class="sn-body">
<div class="wrap-container">
<div class="chartsdom" id="chart_polo"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "waterPolo",
data() {
return {
option: null
}
},
mounted() {
this.getEchart();
},
methods: {
getEchart() {
let myChart = echarts.init(document.getElementById('chart_polo'));
this.option = {
series: [{
type: 'liquidFill',
data: [0.45],
radius: '70%',
color: ['#00b9f5'],
backgroundStyle: {
color: 'rgba(0, 0, 0, 0.5)',
borderColor: '#007bff',
borderWidth: 3,
shadowColor: 'rgba(0, 123, 225, 0.4)',
shadowBlur: 20
},
outline: {
show: false,
},
}]
}
myChart.setOption(this.option, true);
window.addEventListener('resize', () => {
myChart.resize();
});
}
},
beforeDestroy() {
}
};
</script>
<style lang="scss" scoped>
.sn-container {
left: 974px;
top: 2838px;
width: 432px;
height: 400px;
.chartsdom {
width: 100%;
height: 100%;
}
}
</style>
呈现效果
使用体验
更多细节的地方，我目前水平差，有太多的地方需要学习。
这里放两个资源，回头我有时间把前端的知识查漏补缺。
不足之处，欢迎指正。
更新地址：GitHub