🍭 Vue URL Shortener

This is backend-agnostic project structure as opposed to monolithic example.

What I'm gonna use:

• Vue

• Webpack for bundling & developing

• Pug template engine

• vue-cli

• My vue-cli-plugin-coffee to support CoffeeScript2

• vue-loader for loading .vue components

• My vue-cli-plugin-sugarss to support SugarSS linting

• Stylus CSS Preprocessor

• PostCSS for linting and autoprefixing mostly

• Babel

• express for static serving

• Heroku for delpoyment

---

Development

$ npm run serve

---

Project Structure

public

Static files.

src/api

API module for counting, storeing and geting Links.

src/components

This one serves as the VueJS components' storage. Usually src/components/.sample contains .vue files with:

• a logic written in script[lang=coffee];
• a template written in template[lang=pug];
• styles written in style[lang=stylus][scoped];

src/utils/base62.coffee

base62 number encoder.

src/utils/variables.sss

Stylus/SugarSS variables.

src/App.vue

Vue instance.

src/main.js

Entry point.

---

🎉