Run from local using npm start
.
A lightweight Vue.js starter.
YOU CAN READ THIS DOC IN A MORE FRIENDLY WAY HERE.
- Vue.js 2
- Vue Router 3
- Vuex 3
- Vue Cookie
- ES6 using Babel
- Webpack 4
- Axios
- SASS
- ESLint
- SASSLint
- Jest with vue-test-utils
You can find documentation and informations about each modules by following the above links.
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
.
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
.
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"
}
}
I created a generator using Yeoman, it can generate view, styles and tests. You can find it here with installation and usage instructions.
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';
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
.
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 (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');
}
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.
This starter uses Single File Components structure, which is more suitable for large project but doesn't make it harder for small apps.
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 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 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 tosrc/helpers/API.js
, so directly to the configured Axios instance@Config
pointing tosrc/config.js
@Component
pointing tosrc/components
@View
pointing tosrc/views
@MasterStyle
pointing tosrc/scss/master.scss
@Asset
pointing tosrc/assets
@Test
pointing to__test__
@
pointing tosrc
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 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.
All the content is under MIT license.