GitHub上的项目体验第一期——VueDataV

GitHub上的项目体验第一期——VueDataV

凡是过往,皆为序章

前言

今天又如往常一般打开GitHub的trending看vue的项目。不过今天有点不一样了。我突然想下载下来运行一下。之前收藏了许多GitHub的vue项目,但是都没记录下来。

项目地址:jackchen0120/vueDataV

项目介绍:基于Vue + Echarts 构建的数据可视化平台,酷炫大屏展示模板和组件库,持续更新各行各业实用模板和炫酷小组件。

项目效果:

image-20201002142051276

碰巧我之前也使用过vue+echarts开发数据可视化平台,还写了《前端可视化echarts使用理解》。

下面我将详细记录使用过程以及使用体验;

文章目录

  • GitHub上的项目体验第一期——VueDataV
    • 前言
    • 使用过程
      • 初始化
      • 项目结构梳理
      • 呈现效果
    • 使用体验

使用过程

初始化

首先在jackchen0120/vueDataV下载项目,我一开始以为没多大的。结果有20.8M。用GitHub下载有些慢。

我记得以前我好像收藏过一些让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!     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 出现之前:前端依赖项是保存到存储库中并手动下载的
  • 2010npm 发布并支持 nodejs
  • 2012npm 的使用量急剧增加——主要是由于 Browserifys 浏览器的支持
  • 2012npm 有了一个竞争对手 bower,它完全支持浏览器
  • 2012-2016:前端项目的依赖项数量成倍增加
  • 2012-2016:构建和安装前端应用变得越来越慢
  • 2012-2016:大量(重复的)依赖项存储在神奇的 node_modules 内的嵌套文件夹中☢️
  • 2012-2016rm -rf node_modules 成为前端开发人员最常用的命令。
  • 2015bower 输给了 npm
  • 2015node_modules 被修改为扁平化的文件结构!
  • 2016left-pad成为当时的新闻头条
  • 2016yarn 发布
  • 支持 npmbower 仓库
  • yarn.lock 能够锁定安装的版本并提供确定性的依赖关系。不再 rm -rf node_modules
  • yarn install 花费的时间是 npm install 的一半(不使用缓存的前提下)
  • 缓存和脱机模式使构建过程几乎不花费时间
  • 2016npm 发布 shrinkwrap
  • 尝试处理依赖项锁定
  • 不幸的是,一些错误和超出其管理能力的承诺导致该工具的声誉下降
  • 2017npm 5 发布
  • package-lock.json 是他们的新工具,shrinkwrap 被放在一边
  • package-lock.json 开始与 yarns 锁定文件竞争
  • 2018npm ci 发布
  • 直接用 package-lock.json 构建代码
  • 没有代价高昂的依赖项安全性分析和版本分析
  • 大大减少了在构建服务器上的构建时间!
  • 2018npm 6 发布 ‍♀️
  • npm 检查要安装的依赖项中的安全漏洞
  • yarnnpm 的构建时间不再有显差异

项目结构梳理

image-20201002155812317

首先在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组件中引用了许多组件


接着我们看公共组件的文件夹components。点开其中最小的一个组件waterPolo/index.vue。作者写这个组件写得挺舒服的,开头就可以知道是什么图。

呈现效果

使用体验

更多细节的地方,我目前水平差,有太多的地方需要学习。

这里放两个资源,回头我有时间把前端的知识查漏补缺。

qianguyihao / Web

金色小芝麻 / jiujin

不足之处,欢迎指正。

更新地址:GitHub

更多内容请关注:CSDN、GitHub、掘金

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright www.122dh.com Rights Reserved.