Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/peterlamar/vue-examples
Collection of Vue examples for beginner front end developers
https://github.com/peterlamar/vue-examples
beginner vue vue-cli vuejs2
Last synced: 18 days ago
JSON representation
Collection of Vue examples for beginner front end developers
- Host: GitHub
- URL: https://github.com/peterlamar/vue-examples
- Owner: peterlamar
- Created: 2019-01-22T14:50:23.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-18T13:42:00.000Z (over 1 year ago)
- Last Synced: 2024-08-01T00:51:09.210Z (3 months ago)
- Topics: beginner, vue, vue-cli, vuejs2
- Language: JavaScript
- Homepage:
- Size: 6.42 MB
- Stars: 264
- Watchers: 3
- Forks: 31
- Open Issues: 124
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-examples
Collection of Vue.js reference examples for teaching and learning Vue. These examples assume NO experience of front end by the reader. I myself had more experience as a backend engineer and found most front end examples required too much familiarity of HTML, Javascript and the front end stack. I journaled these examples to help myself and others.
The early examples 1-15, are intentionally simple while the remainder start using VUE cli and NUXT which are more sophisticated patterns (they generate complex starting projects) that it is helpful to build up to. VUE cli is what an experienced front end developer may use if they are unfamiliar with Vue and Nuxt would be used by an intermediate Vue Front End engineer as it provides more benefits as well as more complexity.
## Introduction
These examples can be accessed by opening the index.html file within your browser. The related javascript and css files are referenced by this file when appropriate. This is a good way to test javascript and Vue snippets found on the web.
1. [Hello World](https://github.com/peterlamar/vue-workshop/tree/master/1-helloworld)
1. [Instance](https://github.com/peterlamar/vue-workshop/tree/master/2-instance)
1. [Vbind](https://github.com/peterlamar/vue-workshop/tree/master/3-vbind)
1. [Computed](https://github.com/peterlamar/vue-workshop/tree/master/4-computed)
1. [Watcher](https://github.com/peterlamar/vue-workshop/tree/master/5-watcher)
1. [Class](https://github.com/peterlamar/vue-workshop/tree/master/6-class)
1. [Events](https://github.com/peterlamar/vue-workshop/tree/master/7-events)
1. [Vmodel](https://github.com/peterlamar/vue-workshop/tree/master/8-vmodel)
1. [Component](https://github.com/peterlamar/vue-workshop/tree/master/9-component)
1. [ComponentMessage](https://github.com/peterlamar/vue-workshop/tree/master/10-componentmessage)
1. [ComponentDynamic](https://github.com/peterlamar/vue-workshop/tree/master/11-componentdynamic)
1. [Async](https://github.com/peterlamar/vue-workshop/tree/master/12-async)
## Charts and Graphs
These are interesting if you wish to jumpstart into data visualization.
13. [Chart](https://github.com/peterlamar/vue-workshop/tree/master/13-chart)
14. [Vuechart](https://github.com/peterlamar/vue-workshop/tree/master/15-vuechart)
15. [Vuebars](https://github.com/peterlamar/vue-workshop/tree/master/15-vuebars)
## Vue CLI
These examples start with the [VUE cli](https://cli.vuejs.org/) and represent the beginnings of the single page app pattern. This pattern differs from the index.html file in that javascript files are separated out into .vue files which is easier to maintain in larger projects.
16. [LocalProxy](https://github.com/peterlamar/vue-workshop/tree/master/16-localproxy)
17. [AGGrid](https://github.com/peterlamar/vue-workshop/tree/master/17-aggrid)
18. [tailwind](https://github.com/peterlamar/vue-workshop/tree/master/18-tailwind)
19. [svgdots](https://github.com/peterlamar/vue-workshop/tree/master/19-svgdots)
20. [d3connectdots](https://github.com/peterlamar/vue-workshop/tree/master/20-d3connectdots)
21. [firebasechat](https://github.com/peterlamar/vue-workshop/tree/master/21-firebase-chat)
## Nuxt
The [Nuxt](https://nuxtjs.org/) project is an attempt to improve on the Vue cli by providing some common settings as defaults in the generated project.
22. [HelloNuxt](https://github.com/peterlamar/vue-workshop/tree/master/22-hellonuxt)
23. [todo-app](https://github.com/peterlamar/vue-workshop/tree/master/23-todo-app)
## Contributing
If any of this is helpful to you or you wish to improve upon these examples, pull requests are absolutely welcome!
## References
1. [Mozilla DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
2. [Vue Tutorial](https://vuejs.org/v2/guide/installation.html)
3. [Babel Javascript 2015](https://babeljs.io/docs/en/learn)