re-fort / vue-webpack-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

51.0 2.0 5.0 1.56 MB

A webpack boilerplate with vue-loader, axios, vue-router and vuex

Home Page: https://re-fort.net/vue-webpack-boilerplate/

License: MIT License

HTML 1.30% Vue 34.02% JavaScript 63.74% CSS 0.93%

vue2 vue-loader webpack-boilerplate vue-router es2015 bulma axios vuex mocha karma

vue-webpack-boilerplate's Introduction

vue-webpack-boilerplate

A Webpack boilerplate with Vue.js, vue-loader, axios, vue-router and Vuex.
The aim of this project is:

remove the need of manually setting up above libraries
provide useful features that are necessary when building SPA

Demo

https://re-fort.net/vue-webpack-boilerplate/

What's included

develop

Vue(2.x.x)
webpack(3.x.x)
vue-loader
axios
vue-router
Vuex
Buefy(Vue components based on Bulma)
Font Awesome

test

vue-test-utils
Mocha
Karma
power-assert

Features

Practical demo
Buefy components
Ready to use Vue plugins (vue-router, Vuex)
Useful tracking plugins(Google Analytics and Sentry)
Use of webpack and vue-loader with Hot Module Replacement
Unit Testing (with Karma + Mocha + vue-test-utils)
Add hash to filename when production build (avoiding cache problems)
Inject built files (with html-webpack-plugin)
Handy NPM scripts
CI (with Circle CI)

Setup

git clone https://github.com/re-fort/vue-webpack-boilerplate
cd vue-webpack-boilerplate
npm i # or yarn install
npm run dev # or yarn run dev

# You also need to set up vue-webpack-boilerplate-api, if you run this boilerplate at local
# See: https://github.com/re-fort/vue-webpack-boilerplate-api

Usage

npm run dev
npm run build
npm test

vue-webpack-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

ritksm vitamin5x mozyok august8-sandbox jomaf1010

vue-webpack-boilerplate's Issues

Why don't you have any unit tests?

I want to use this boilerplate to FULL SPEC VUE DEVELOPMENT (with tests).

[QUESTION] - Adding bulma extensions

How would I go about adding any of these bulma extensions?

Improve UI and features of the auth example

Add sign-in / sign-out buttons to the header
Show loading when verifying the token

GA Tracking

GA tracking is necessary for many sites, so let's provide this feature built-in!

The is-disabled CSS class has been deprecated

Follow the change of bulma.
Related issue : jgthms/bulma#276

Loading spinner

Bluma's spinner is good, but it can only be applied partly.
(e.g. button component)
When loading a page, we need another loading component.

Add notification component

This component is absolutely necessary 😆

Since Sass is similar in notation to the Pug(Jade) used in this boilerplate, change from Scss to Sass.
I thought about using vue-cli to be able to let you select CSS Pre-Processors you like, but decided to make it simpler.

Remove src folder on gh-pages branch

It should be on master brunch

Upgrade to webpack4

Migrate JavaScript to TypeScript

I'm thinking about migrating to TypeScript due to focus on continuous development and improve developer experience.

Add auth example

In many cases, authentication is required when building SPA.
Therefore, add an auth example with the usage of Vuex for managing the access token.

TODO:

Server-side implementation
Client-side implementation

Add hash to filename when production build

It's just a significant feature for practical use for production.

Code splitting

To improve its initial loading speed

Support E2E test

Since vue-webpack-boilerplate supports End-to-end(E2E) tests, I'll also provide it.
vue-webpack-boilerplate uses Nightwatch, but in that case we can't use mocha and power-assert.
So I'm considering writing tests with WebdriverIO + mocha + power-assert.

Upgrade to babel7

Error reporting with Sentry

Consider whether to use Sentry for error reporting or not

ページングの構成がわかりにくい

ページングに関することをpage.jsとpagination.vueの2つにまたがってハンドリングするのはキモすぎる
不必要なmixinは作らず、コンポーネント内で解決するべき

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Inject built files to HTML file automatically

Inject built files to index.html with html-webpack-plugin

Consider using Buefy

Since this boilerplate uses Bulma, Buefy is compatible and it provides many useful components.
I'll decide after trying it.

webpack public path problem

I have encountered the following problem.
My project (https://github.com/my-lgtm/my-lgtm.github.com) use the github pages, so the published address is "https://my-lgtm.github.io". Therefore, I set webpack _project to ''(empty string). But vue-webpack-boilerplate use /${_project}/ as webpack publicpath (in production), so my build stylesheets were reading the font-awesome from http://static/... (Also you know, // was interpreted http(s)://.)
Finally I set `` to _project and `/` to publicpath, and got the correct font-awesome path.

There is any better solution?