Using vue-cli3(@vue/cli)
- TypeScript
- Router
- Vuex
- CSS Pre-Processors
- Stylus
- Linter / Formatter
- ESLint
- Prettier
- Unit Test
- Jade
-
class-style component syntax
-
Using Pug as a template engine
- Rewriting vue's initial template using pug and stylus
-
Using vuex-module-decorators
- championswimmer/vuex-module-decorators.
- One Module is made using vuex-module-decorators. src/store/modules
-
Auto Lint on save
-
Atomic Design to separate the components, but it's not that exact
- Vue: Based on Official Style Guide
- TypeScript: Based on Unofficial Style Guide (TypeScript Deep Dive)
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
- 2 spaces per indentation
User Snippets for Visual Studio Code
"vue-template": {
"prefix": "vue-template",
"body": [
"<template lang=\"pug\">",
" .${1:name}",
"</template>",
"<script lang=\"ts\">",
"import { Component, Vue } from \"vue-property-decorator\";",
"import router from \"@/router\";",
"",
"@Component({",
" name: \"${1:name}\",",
" components: {}",
"})",
"export default class ${2:class} extends Vue {}",
"</script>",
"<style lang=\"stylus\" scoped>",
".${1:name}",
"</style>",
],
"description": "simple vue template"
}
"vue-template-module": {
"prefix": "template-module",
"body": [
"import {",
" Mutation,",
" MutationAction,",
" Action,",
" VuexModule,",
" getModule,",
" Module",
"} from \"vuex-module-decorators\";",
"import store from \"@/store/store\";",
"",
"@Module({ dynamic: true, store, name: \"${1:counter}\", namespaced: true })",
"class ${2:Counter} extends VuexModule {",
" // #region STATE",
" counter: number = 0;",
"",
" // #endregion",
"",
" // #region MUTATION",
" @Mutation // counter",
" public SET_COUNTER(num: number) {",
" this.counter = num;",
" }",
"",
" // #endregion",
"",
" // #region ACTION",
" @Action({ rawError: true })",
" public decrement() {",
" this.SET_COUNTER(this.counter + 1);",
" }",
"",
" // #endregion",
"",
" // #region MUTATION ACTION",
" @MutationAction({ mutate: [\"counter\"] })",
" async resetCounter() {",
" return {",
" counter: 0",
" };",
" }",
" // #endregion",
"}",
"export const ${1:counter} = getModule(${2:Counter});",
],
"description": "simple vue-module template"
}
npm install
npm run serve
npm run build
npm run report
npm run test
npm run lint
npm run test:unit