frankfang/gulu

轱辘，面向源码阅读者的 UI 框架

Gulu UI

Official Documentation

Gulu UI is a different kind of UI framework.

This UI framework is designed for "source code readers". If it's helpful to you, please don't hesitate to star it.

In other words, the purpose of creating this framework is to help frontend beginners learn how to build UI components. All the code aims for readability.

1. You can learn the process of building this framework by examining each commit.
2. You can also learn through the recorded videos I made (Sorry, the videos are paid due to the significant amount of time spent on producing them. However, the screencasts of the project setup process are free, and they can help you quickly get started with this project.)

If you want to start from the first commit, please click here.

If you have any questions about the code, feel free to raise an issue, and I will answer your questions. You can also join the group for consultation at the end of this article.

This UI framework is implemented based on Vue 2.

Note: The code of this UI framework is not yet fully completed (currently about 50% done), so please do not use it in a production environment.

What can you learn

1. Engineering concepts such as unit testing, code coverage, and continuous integration.
2. Technical concepts such as refactoring, TDD/BDD, design patterns, and one-way data flow.
3. Almost all the features of Vue, and a deep understanding of these features rather than just a shallow understanding.

Available Components

• Simple Components: Button, Input, Grid, Layout, Toast, Tabs, Popover, Accordion (code completed)
• Advanced Components: Cascader, Carousel, Responsive Navbar, Pagination, Form Validation, Table, Image Upload, Sticky, Tree, Suggestion, Datepicker (code not completed)
• Others: Router, State Management (code not completed)

Note: This is the current plan, and the specific components to be completed may differ from the above.

Project Features

1. Continuous integration using Travis CI.
2. Rich unit tests with an expected test coverage of over 90% upon project completion.
3. Self-explanatory code that can be understood even without comments.
4. Initially built with Parcel for easy onboarding of beginners, later switched to Vue CLI 3 to achieve more functionalities.

Background

A few years ago, I published an article called "Learn Frontend the Hard Way". At that time, I felt that although there were many good libraries in the open-source community, their source code was not suitable for beginners to read.

So I spent my spare time creating a few wheels with native JS and put them on GitHub. Unexpectedly, hundreds of people followed and hoped that I could release more detailed tutorials.

But at that time, I didn't have time to create more detailed tutorials.

Now finally... I'm still busy, but I've decided to record videos on "building wheels" every Saturday and Sunday.

This time, in order to follow the trend of frontend development, I directly used Vue 2 to build the wheels. If you are learning Vue 2, then the source code of Gulu UI will be very suitable for you to read.

Visual Design

This UI framework draws inspiration from some mature UI frameworks (such as Framework7, Element UI, and Ant Design) in terms of appearance. After simplification, I created my own visual design draft.

If you find any shortcomings in the visual design draft, you can leave a comment directly on it, and I will see it.

Why is it called Gulu UI

Because "Gulu" means "wheel" in Chinese.

Source Code Study

1. Install dependencies

   yarn install
   

2. Start dev server

   yarn serve
   

gulu's Issues

记得销毁

attachToDocument
类型：boolean
默认值：false
当设为 true 时，组件在渲染时将会挂载到 DOM 上。

如果添加到了 DOM 上，你应该在测试的最后调用 wrapper.destroy() 将元素从文档中移除并销毁组件实例。

大佬，UI库的 cascader-demo可以提供吗？还有没有找到表单组件。请问在哪里可以查阅呢？

大佬，UI库的 cascader-demo可以提供吗？还有没有找到表单组件。请问在哪里可以查阅呢？
非常感谢作者的回复

collpase组件是有问题的， 拷贝selected时需要用一个外部并且是add和remove的公共变量

`

<script> import Vue from "vue"; export default { name: "g-collapse", props: { single: { type: Boolean, default: false }, selected: { type: Array } }, data () { return { eventBus: new Vue } }, provide () { return { eventBus: this.eventBus } }, mounted () { this.selected && this.eventBus.$emit('update:selected', this.selected) let selectedCopy this.eventBus.$on('update:addSelected', (name) => { // 深拷贝props, 因为要修改他的值 if (!selectedCopy) { selectedCopy = JSON.parse(JSON.stringify(this.selected)); } if (this.single === true) { selectedCopy = [name] } else { selectedCopy.push(name) } // 实现传入是变量时, 需要是响应式的, 所以派发事件, props变为响应式 this.$emit('update:selected', selectedCopy) this.eventBus.$emit('update:selected', selectedCopy) }) this.eventBus.$on('update:removeSelected', (name) => { if (!selectedCopy) { selectedCopy = JSON.parse(JSON.stringify(this.selected)); } let index = selectedCopy.indexOf(name) selectedCopy.splice(index, 1) console.log(selectedCopy) // 实现传入是变量时, 需要是响应式的, 所以派发事件, props变为响应式 this.$emit('update:selected', selectedCopy) this.eventBus.$emit('update:selected', selectedCopy) }) this.$children.forEach((vm) => { vm.single = this.single }) } } </script> <style lang="scss" scoped> $grey: #ddd; $border-radius: 4px; .collapse { border: 1px solid $grey; border-radius: $border-radius; } </style>

`

运行upload.spec.js失败，提示TypeError: Cannot read property 'getAttribute' of undefined

TypeError: Cannot read property 'getAttribute' of undefined

看了下貌似是因为没有没有成功trigger那个按钮导致的 是因为api的用法变了？

请问test目录下的.test.js文件和.spec.js文件命名有什么含义吗？

你好，看了一下test文件下的文件，有点疑惑，为什么有些文件是以.spec做后缀名，而有些文件是以.test做后缀名，两者分别代表什么含义呢？

二维码过期了

现在安装parcel提示一个 warning " > [email protected]" has unmet peer dependency "webpack@^4.27.0 || ^5.0.0".

安装完成后运行打包就是下面的报错

Debugger attached.
Server running at http://localhost:1234
\ Building index.html...Debugger attached.
Debugger attached.
Debugger attached.
Debugger attached.
� C:\Users\12822\Desktop\gulu\node_modules\parcel-bundler\src\builtins\css-loader.js: Invalid Version: undefined

Popover组件在非自主销毁时会报 Cannot read property 'removeEventListener' of undefined

    mounted () {
      if (this.trigger === 'click') {
        this.$refs.popover.addEventListener('click', this.onClick)
      } else {
        this.$refs.popover.addEventListener('mouseenter', this.open)
        this.$refs.popover.addEventListener('mouseleave', this.close)
      }
    },
    destroyed () {
      if (this.trigger === 'click') {
        this.$refs.popover.removeEventListener('click', this.onClick)
      } else {
        this.$refs.popover.removeEventListener('mouseenter', this.open)
        this.$refs.popover.removeEventListener('mouseleave', this.close)
      }
    },

应该是没有hover或者click触发时组件并不会被实例化，导致eventListener没有被添加，在最后destroyed时就会找不到这个事件监听器，就会出现无法移除报错情况