Need help with Vue-Starter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Shyam-Chen
121 Stars 33 Forks MIT License 846 Commits 0 Opened issues

Description

:poodle: A boilerplate for HTML5, Vue, Vue Router, i18n, Tailwind, Windi, Netlify, and Vite.

Services available

!
?

Need anything else?

Contributors list

# 26,732
fronten...
Express
seed
aot-com...
846 commits

Vue Starter

:poodle: A boilerplate for HTML5, Vue, Vue Router, i18n, Tailwind, Windi, Netlify, and Vite.

Table of Contents

Getting Started

Follow steps to execute this boilerplate.

  1. Clone this boilerplate
$ git clone --depth 1 https://github.com/Shyam-Chen/Vue-Starter 
$ cd 
  1. Install dependencies
$ yarn install
  1. Compiles and hot-reloads for development
$ yarn serve
  1. Compiles and minifies for production
$ yarn build
  1. Lints and fixes files

File Scope:

src/**/*.{js,vue}
$ yarn lint
  1. Runs unit tests

File Scope:

src/**/*.spec.js
$ yarn unit
  1. Runs end-to-end tests

File Scope:

e2e/**/*.spec.js
$ yarn build
$ yarn preview

$ yarn setup $ yarn e2e

  1. Measure app performance

File Scope:

e2e/**/*.meas.js
$ yarn build
$ yarn preview

$ yarn setup $ yarn meas

  1. Mock requests

mock/requests
is a fork of Koa-Starter that was made easy and quick way to run mock APIs locally.

$ yarn active
$ yarn mock

Key Features

This seed repository provides the following features:

Dockerization

Dockerize an application.

  1. Build and run the container in the background
$ docker-compose up -d default
  1. Run a command in a running container
$ docker-compose exec default 
  1. Remove the old container before creating the new one
$ docker-compose rm -fs
  1. Restart up the container in the background
$ docker-compose up -d --build default

Configuration

Control the environment.

Default environments

Set your local environment variables. (use

this. = process.env. || ;
)
// env.js

function Environment() { this.API_URL = process.env.API_URL || 'http://localhost:3000'; }

export default new Environment();

Continuous integration environments

Add environment variables to the CircleCI build.

CODECOV_TOKEN=xxx

Continuous deployment environments

Add environment variables to the Netlify build.

API_URL=http://api.example.com

File-based environments

If you want to set environment variables from a file.

.
├── e2e
├── envs
│   ├── dev.js
│   ├── stage.js
│   └── prod.js
├── mock
├── public
└── src
// envs/.js

function Environment() { this.API_URL = 'http://api.example.com'; }

module.exports = new Environment();

$ yarn add env-cmd -D
// package.json

"scripts": { // "env-cmd -f ./envs/.js" + "yarn build" "build:dev": "env-cmd -f ./envs/dev.js yarn build", "build:stage": "env-cmd -f ./envs/stage.js yarn build", "build:prod": "env-cmd -f ./envs/prod.js yarn build", },

SEO friendly

Netlify comes with built-in prerendering. Enabling it is as simple as checking a box:

Set up prerendering

VS Code settings

The most basic configuration.

{
  // ...
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "javascript.validate.enable": false,
  "css.validate": false,
  "vetur.validation.template": false,
  "vetur.validation.script": false,
  "vetur.validation.style": false,
  // ...
}

Directory Structure

The structure follows the LIFT Guidelines.

.
├── src
│   ├── __tests__
│   │   └── ...
│   ├── _  -> app of private or protected things
│   │   └── ...
│   ├── assets  -> datas, fonts, images, medias, styles
│   │   └── ...
│   ├── core  -> core feature module
│   │   └── ...
│   ├──   -> feature modules
│   │   ├── __tests__
│   │   │   ├── .spec.js
│   │   │   ├── actions.spec.js
│   │   │   └── getters.spec.js
│   │   ├── _  -> feature of private or protected things
│   │   │   └── ...
│   │   ├── .vue  -> page component
│   │   ├── actions.js
│   │   ├── constants.js
│   │   └── getters.js
│   ├──   -> module group
│   │   └──   -> feature modules
│   │       ├── __tests__
│   │       │   ├── .spec.js
│   │       │   ├── actions.spec.js
│   │       │   └── getters.spec.js
│   │       ├── _  -> feature of private or protected things
│   │       │   └── ...
│   │       ├── .vue  -> page component
│   │       ├── actions.js
│   │       ├── constants.js
│   │       └── getters.js
│   ├── shared  -> shared feature module
│   │   └── ...
│   ├── App.vue
│   ├── Home.vue
│   └── main.js  -> entrypoint
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .prettierrc
├── .stylelintrc
├── circle.yml
├── docker-compose.yml
├── Dockerfile
├── env.js
├── index.html
├── jest.config.js
├── LICENSE
├── netlify.toml
├── package.json
├── README.md
├── vite.config.js
└── yarn.lock

Microservices

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.

See Client-side Micro-Fullstack for instructions on how to create microservices from source.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.