vue 2 SPA boilerplate
Archieced:
- vue 2
- vuex — state management
- vue-resource — async handler
- vue-router — SPA (single page application)
- vue-i18n — multiple language handler
Step by step:
- step1: install yarn
- step2: install webpack, vue-cli
- step3: init vue2 project
- step4: add vuex
- step5: add vue-resource
- step6: add vue-router
- step7: add vue-i18n
- final: completed your web app by this boilerplate
source code
Suggest you to clone / download this project, learn step by step with source code.
(This post will not introduce everything every detail, if you don’t understand what it mention about, just google it with the keyword.)
step1: install yarn
you can install yarn by brew, npm…whatever
$ npm install -g yarnstep2: install webpack, vue-cli
about webpack:
webpack is a module bundler.
about vue-cli:
vue-cli is a simple CLI for scaffolding Vue.js projects.
yarn global add webpack(or webpack@2)
yarn global add vue-cliabout yarn:
npm install === yarn / yarn install
npm install xxx — save === yarn add xxx
npm uninstall xxx — save === yarn remove xxx
npm install xxx — save-dev === yarn add xxx — dev
npm update === yarn upgrade
npm install xxx -g === yarn global add xxx
step3: init vue2 project
vue-cli will init your vue project with webpack.
just choose what you need in project when you init.
just “npm run dev”, it will use 8080 port by webapck dev server.
vue init <template-name> <project-name>
...
...
npm run devstep4: add vuex
vuex is something like redux to handle data flow in your app.
add vuex into project, add a folder ex: store.
Following is a simple case, I separate actions.js, getters.js, mutations.js and intex.js in store folder
(you don’t have to follow my rule, there are many excellent projects structure can follow like vue-hackernews)
yarn add vuex- in main.js — use vuex to your vue project
import store from './store'
...
const app = new Vue({
el: '#app',
store,
render: h => h(App)
})- in vue component
<template>
<p>{{ count }}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</template><script>
import { mapGetters, mapActions } from 'vuex'
// ...
computed: {
...mapGetters([
'count',
]),
your computed..
},
methods: {
...mapActions([
'increment',
'decrement'
]),
your method..
</script>
- in /store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as actions from './actions'
import * as mutations from './mutations'Vue.use(Vuex)
const state = {
count: 0
}const store = new Vuex.Store({
state,
getters,
actions,
mutations
})export default store
- in /store/actions.js
export const increment = ({ commit }) => {
commit('INCREMENT')
}
export const decrement = ({ commit }) => {
commit('DECREMENT')
}- in /store/actions.js
export const INCREMENT = state => state.count++export const DECREMENT = state => state.count--
- in /store/getters.js
export const count = state => state.countstep5: add vue-resource
use vue-resource to handle async function.
vue-resource is out of official maintance.
you can use axios or fetch any library you like.
in my case. I use one function to handle async function in api/index.js. Handle response in actions.js. Handle error in component for ui.
(you don’t have to follow my rule, there are many excellent projects structure can follow like vue-hackernews)main
yarn add vue-resouce- in main.js — use vue-resource to your vue project
import VueResource from './router'
...
Vue.use(VueResource)
...- /api/index.js
import Vue from 'vue'const api = {}api.timeout = { timeout: 20000 }
api.serverURL = 'your api server url'api.asyncRequest = async (urlEnd, type, payload = {}) => {
return await Vue.http[type](api.serverURL + urlEnd, payload, api.timeout)
}export default api
- /store/actions.js
export const exampleCallApi = async ({ commit }, payload) => {
const urlEnd = '/example/apiurl'
const type = 'post'
const resp = await api.asyncRequest(urlEnd, type, payload)
return resp
}- vue component
// add action into compoent
methods: {
...mapActions([
'exampleCallApi'
]),
...// in handle method..
this.exampleCallApi().then(resp => {
console.log('resp: ', resp)
}).catch(resp => {
console.log('catch error: ', resp)
})
step6: add vue-router (SPA)
If you wanna make a single page application. vue-router is the official router for Vue.js.
yarn add vue-router- in main.js — use vue-route to your vue project
import VueRouter from './router'
...
Vue.use(VueRouter)
...
const app = new Vue({
router,
...App
})- add router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home'
import Page1 from './components/page1'
import Page2 from './components/page2'Vue.use(VueRouter)const routes = [
{ path: '/', component: Home },
{ path: '/page1', component: Page1 },
{ path: '/page2', component: Page2 },
{ path: '*', redirect: '/' }]const router = new VueRouter({routes})export default router
- in App.vue
<template>
<router-view></router-view>
</template>- in vue component use like
<router-link to="/page1">Go to page1</router-link>step7: add vue-i18n
vue-i18n is use to handle multiple language in vue project.
you can choose any other library you like.
yarn add vue-i18n- in main.js — use vue-i18n to your vue project
import VueI18n from 'vue-i18n'
import locales from './locales' // new folder
...
Vue.use(VueI18n)Vue.config.lang = 'en' // setting language like this. Object.keys(locales).forEach(lang => {
Vue.locale(lang, locales[lang])
})
- add /locales/index.js
const locales = {
'en': {
example: 'its a example for using i18n with vue'
},
'zh': {
example: '這是個vue結合i18n的範例'
}
}
export default locales- in vue component
<h2>{{ $t("example") }}</h2> // use like this
export default localesfinal: now you can do any web application by this structure
You can check it all in my github. vue 2 boilerplate
