vue-elemnt-admin源码学习

栏目: IT技术 · 发布时间: 3年前

内容简介:我们可以看到vue-element-admin的单元测试是使用jtest.config.js来进行测试vue和jtest的结合就是和官网的一样:jtest的官网:

vue-elemnt-admin源码学习

vue-element-admin是一个基于vue,element-ui的集成的管理后台。它的安装部分就不说了,按照官网的步骤一步步就可以执行了。

https://panjiachen.github.io/vue-element-admin-site/zh/

单元测试

我们可以看到vue-element-admin的单元测试是使用jtest.config.js来进行测试

vue和jtest的结合就是和官网的一样: https://cn.vuejs.org/v2/guide/unit-testing.html

jtest的官网: https://github.com/facebook/jest#getting-started

我们可以看到,tests文件夹中

jtest对应的文件有jtest.config.js,这里面的配置信息在这个页面可以找到: https://jestjs.io/docs/zh-Hans/configuration

可以稍微修改下jest.config.js,将collectCoverage: true, 可以再设置一下coverageReporter

vue-elemnt-admin源码学习

于是可以运行 npm run test:unit

vue-elemnt-admin源码学习

在控制台可以打出覆盖率报告,也可以在tests/unit/converage下面打出这些覆盖率报告。

jsconfig.json

这个是给IDE vscode使用的配置文件。

plop机制

plop机制是自动生成vue文件的一种机制。

plop相关的有几个地方,一个是package.json里面的npm run new。一个是plop.js中定义了3个生成器:view,store,component。

这三个生成器在文件夹plop-template中都有定义,定义了一个prompt.js和一个index.hbs。hbs是模版文件,prompt是交互文件,所以我们可以在命令行中使用npm run new 来初始化一个vue文件。

vue-elemnt-admin源码学习

plopjs的文档地址: https://plopjs.com/documentation/

postcss.config.js

postcss.config.js说明可以使用postcss插件来进行配置。

关于为什么要使用postcss,这两篇文章写的很好:

https://segmentfault.com/a/1190000003909268

https://juejin.im/post/59e5dc1d6fb9a0450a666d62

简单来说,使用postcss会让css可以按照标准写法,生成不同前缀的写法文件

这个是官方说明地址: https://github.com/postcss/postcss/blob/master/README-cn.md

svgo

我们在package.json中可以看到有个script是svgo。

这个命令是将svg图片文件进行压缩的。 https://panjiachen.github.io/vue-element-admin-site/zh/feature/script/svgo.html

svg是矢量图,svg放大不失真。svg和canvas都是h5推荐使用的图形技术,canvas基于像素,svg为矢量,还有完整的动画,事件机制。

目录结构

其实vue-elemnt-admin的目录结构在官网这边也描述很清楚了:

https://panjiachen.github.io/vue-element-admin-site/zh/guide/#目录结构

vue-elemnt-admin源码学习

这个目录结构还是很适合做前端工程学习的。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Programming Ruby中文版

Programming Ruby中文版

托马斯 / 孙勇、姚延栋、张海峰 / 电子工业出版社 / 2007-3 / 99.00元

《Programming Rudy》(中文版)(第2版)是它的第2版,其中包括超过200页的新内容,以及对原有内容的修订,涵盖了Ruby 1.8中新的和改进的特性以及标准库模块。它不仅是您学习Ruby语言及其丰富特性的一本优秀教程,也可以作为日常编程时类和模块的参考手册。Ruby是一种跨平台、面向对象的动态类型编程语言。Ruby体现了表达的一致性和简单性,它不仅是一门编程语言,更是表达想法的一种简......一起来看看 《Programming Ruby中文版》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具