Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nathanielinman/jugs-vue
Vue app generator JUGS-VUE makes getting started with VueJS easy!
https://github.com/nathanielinman/jugs-vue
babel boilerplate javascript pinia postcss pug slush stylus vitejs vue vuejs
Last synced: about 2 months ago
JSON representation
Vue app generator JUGS-VUE makes getting started with VueJS easy!
- Host: GitHub
- URL: https://github.com/nathanielinman/jugs-vue
- Owner: NathanielInman
- License: mit
- Created: 2015-03-03T21:12:02.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T23:37:12.000Z (2 months ago)
- Last Synced: 2024-10-29T00:24:54.884Z (2 months ago)
- Topics: babel, boilerplate, javascript, pinia, postcss, pug, slush, stylus, vitejs, vue, vuejs
- Language: Vue
- Homepage:
- Size: 991 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jugs-vue
[](https://github.com/nathanielinman/jugs-vue/actions)
Vue 3 app generator **JUGS-VUE** makes getting started with VueJS easy!
- **Vue3 + VueRouter** : *Modern SPA framework inspired by React and Angular*
- **Vue Hot Reload API** : *Live reloading system*
- **Pinia** : *Flux data management. Multiple stores, single dispatcher, no clumsy reducers*
- **PrimeVUE** : *Vue3 compatible modern component library*
- **Vite.js** : *Project compilation, module bundler, uglifier, etc.*
- **Babel** : *Modern JS to ES5 compiler formerly called 6to5*
- **Pug (Optional)** : *Templating system made easy*
- **Stylus** : *Powerful CSS Preprocessor with a beautiful syntax*
## Table of Contents
* [Installation](#installation)
* [File Structure](#file-structure)
* [Notes](#notes)
* [Thanks](#thanks)
## Installation
Simply install this package globally and run it:
```
npm install -g jugs-vue
mkdir appName
cd appName
jugs-vue
```
follow the instructions and it will set everything up for you and install
dependencies. After it's finished to run the project and have it automatically
listen to the code for changes and update merely run the command:
```
npm start
```
And just like that, you're on the way to making your app!
## File Structure
```
project
├─dist
│ └─ <-(assets copied here on compile)
├─ public
│ └─ (imgs/html/pdf/other go here)
├─ src
│ ├─ routes
│ │ ├─ HelpIndex.vue (help page controller)
│ │ └─ Dashboard.vue (landing page controller)
│ ├─ routes.js (all route initialization)
│ ├─ App.vue (the root vue page component)
│ ├─ index.styl (app-wide stylus file)
│ └─ index.js (app initializaiton of vue instance)
├─ index.html (main entrance html)
├─ package.json
└─ readme.md
```
## Thanks
This boilerplate of mine is just a combination of great tools, all credit goes to
those who actually put in all the hard work to create them.
- [Vite.js][7] has been an instrumental boost in productivity and clean code, allowing the
the use of the ES2015 module system. Moving from webpack has greatly improved speed
- Though [Pug][1] (formerly Jade,) has been seen predominately as a server-side helper
for templating, I find it incredibly helpful on front-end projects where I'm using a
build system anyways, as the syntax is far easier to read and reduces duplication of
segments with partials.
- From css to less to sass to [Stylus][2], it's been a long road with css pre-processors,
but I finally found one that lets me drop all the redundant syntax and focus more on the
design. I love my curly brace languages, but personally think that it gets in-between
me and focusing on what's important when dealing with UX, wireframing or general
design.
- No more worrying about vendor prefixes! [Autoprefixer][4] has been an instrumental
improvement to my workflow when it comes to styling. None of that would be possible
without [PostCSS][3] and all of the benefits it's brought to frontend development.
- If you're still coding without a linter like [ESLint][5], I'm not sure whether to
give you a high-five for all the hard work or question your dedication for only
stupidity.
- Dropped Traceur for [Babel][6] (formerly 6to5) because it has more readable compiled
code as well as a much more versatile transpilation story when it comes to upcoming
features to javascript. You can gather more specifics on comparisons of the two at
their website.
# License
[MIT](/LICENSE)
[1]:https://github.com/pugjs/pug
[2]:https://github.com/learnboost/stylus
[3]:https://github.com/postcss/postcss
[4]:https://github.com/postcss/autoprefixer
[5]:http://eslint.org
[6]:https://github.com/babel/babel
[7]:https://vitejs.dev/