m-ripper / vue-boilerplate-typescript

A Vue.js Boilerplate in Typescript w/ Vuex, Vue-Router, Element-UI, i18n, axios, Font-Awesome

Vue.js Boilerplate, Typescript, Vuex, Vue-Router, Element-UI, i18n, axios, Font Awesome

A typescript boilerplate for Vue.js with Vue CLI 3.x that uses:

• vuex
• vue-router
• Element-UI
• i18n
• axios
• Font Awesome
• ...

Requirements

• Node.js (npm)

Installation

1. Install Vue CLI 3.x

   npm install -g @vue/cli
   # OR
   yarn global add @vue/cli
   

2. Install the dependencies

   npm install
   # OR
   yarn install
   

Architecture

This is the way I personally structure Vue.js projects. Feel free to modify it to fit your needs.

• 📁 assets: Contains all assets such as images or sound files.
• 📁 components: Contains all Vue components.
• 📁 layouts: Contains all Vue-Layouts that can be set in the vue-router.
• 📁 models: Contains all models needed for the business logic.
• 📁 requests: Contains all requests needed for communicating with the API.
• 📁 rules: Contains all reusable validation rules.
• 📁 services: Contains all services that fulfill web-requests.
• 📁 store: Contains all modules that are being used by the vuex-store.
• 📁 style: Contains all stylesheets.
• 📁 translations: Contains all translations as .ts files.
• 📁 views: Contains all views that are being used in the vue-router.

Commands

Compiles and hot-reloads for development

npm run serve
# OR
yarn run serve

Compiles and minifies for production

npm run build
# OR
yarn run build

Lints and fixes files

npm run lint
# OR
yarn run lint

Customize configuration

See Configuration Reference.