Vue.JS Starter

Summary

A lightweight Vue.js starter.

YOU CAN READ THIS DOC IN A MORE FRIENDLY WAY HERE.

Vue.JS Starter
- Summary
- Built-in modules
- Usage
- Configuration
- Routing
- Generator
- API
- Vuex
- Style
- Assets
  - Imported assets
  - Static assets
- Single file components
  - Views
  - Components
- Webpack Aliases
- Unit Testing
- License

Built-in modules

You can find documentation and informations about each modules by following the above links.

Usage

We recommend using Yarn but you can also use NPM.

There is only 3 commands that you can either run using npm run or yarn:

start to launch a developpement server with hot reload.
build to create a production version in /dist.
serve to launch a web server in /dist.

Configuration

Application configuration is located in src/config.js.

Build can be configured in webpack.config.js, like the dev server host and port.

serve: {
  host: "localhost",
  port: 3000
}

SASS Linter can be configured in .sass-lint.yml.

ESLint can be configured in .eslintrc.js.

Routing

Routes are listed in src/router/index.js and should contain a meta node with a title, it will be displayed as the document.title, concatened with the separator and the site name in application config.

{
  "path": "/",
  "name": "Home",
  "component": Index,
  "meta": {
    "title": "Accueil"
  }
}

Generator

I created a generator using Yeoman, it can generate view, styles and tests. You can find it here with installation and usage instructions.

API

API use Axios and the base configuration is set in application configuration file.

export const APIConfig = {
  baseURL: '',
  withCredentials: true,
  crossDomain: true,
  contentType: false,
  responseType: 'json',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
};

Axios configuration reference is available here.

The Axios instance is then generated and exported in src/helpers/API.js and you can import it in your views/components this way:

import api from '@API';

Vuex

The Vuex store is located in src/vuex.

There is a main config file (src/vuex/store.js) and a modules directories.

If your application is simple, you can put your state, getters, mutators and actions directly in the store. If it is more complexe, create one sub-directory in modules by functionnality and import in in the store.

The store is accessible from any component/view using this.$store.

Style

All you view/component specific styles should be placed in a file named exactly like the component, in the same directory.
You can place project-specific style in src/scss and import it from the component specific styles (see example in `src/components/Index).

You should import styles in the <script> tag in each component.

You can also put style in the <style> tag in each component, scoped or not, the style injection works the same way using scss files or <style> tag.

Assets

Imported assets

Assets (images, fonts...) used directly in views (Like logo... etc) should be placed in src/assets (@Asset) and imported like a JavaScript module and used like a variable. Example:

import logo from '@/images/logo.png';

You can also import it in scss using webpack resolved path or relative path as usual. Example:

.bg-image {
  background-image: url('@Asset/images/background.png');
}
// OR
.bg-image {
  background-image: url('../../assets/images/background.png');
}

Static assets

Assets used directyle in static/index.html like favicon for example should be placed in static/assets and will be copied on build in the dist/assets directory.

Single file components

This starter uses Single File Components structure, which is more suitable for large project but doesn't make it harder for small apps.

Views

Views are located in src/views and should have their unique styles. It can be compared to a "page". The routes are pointing to views and not to components. They can include one or more components or even none.

Components

Components are located in src/components and should have their unique styles. Components must be imported and used in views. They should be separated in sub-directories organized by views or by functionnalities.

Webpack Aliases

Webpack allows to put some aliases in the webpack config, so you can have shorter and more friendly import statements in your components/views. By default, this starter comes with some aliases listed bellow:

@API pointing to src/helpers/API.js, so directly to the configured Axios instance
@Config pointing to src/config.js
@Component pointing to src/components
@View pointing to src/views
@MasterStyle pointing to src/scss/master.scss
@Asset pointing to src/assets
@Test pointing to __test__
@ pointing to src

An example usage of these aliases is to get the API helper from a view/component:

import api from '@API';

Or to get a component from a view:

import Articles from '@Component/Index/Articles.vue';

Unit Testing

Unit testing is handled using Jest, you can find an example in src/components/Index/Articles.spec.js. They are run in the CI build system, using Travis-CI.

You can place your stubs/mocks in __test__ (@Test) directory when they are project-wide tests assets.

License

All the content is under MIT license.

qraimbault/vue-js-starter-scss