Opinionated Vue TypeScript starter kit for building medium/large applications
Make sure you have NodeJS and Yarn installed and run the following snippet:
git clone https://github.com/gingerpayments/vue-ts-starter
cd vue-ts-starter
yarn setup.
├── dist (git ignored) # Folder where the production build will be stored
├── node_modules (git ignored) # (Dev)Dependencies folder
├── src # Source files
| ├── api # Folder for talking to api's
| ├── assets # Folder where we store assets which will go through webpack loaders
| ├── components # Folder for components
| ├── localization # Folder for localization files/code
| ├── router # Folder where we define the routes
| ├── store # Folder for state management code
| ├── views # Folder for views
| ├── App.vue # Root Vue file
| └── main.ts # Bootstrap/Webpack entry file
├── static # Here we store static assets like favicons
├── test # Automated tests
| ├── unit # Unit tests
| └── e2e # E2E tests
├── types # Folder for TypeScript declaration files
├── .gitignore # File where determine what which files/folders we version control
├── package.json # (Dev)Dependencies registry file and task runner commands (scripts)
├── poi.config.json # Config file of which presets we use and here we can extend the Webpack config
├── README.md # You are currently reading it
├── stats.json (git ignored) # This file will only exist when we run the analyze command
├── tsconfig.json # TypeScript config file
├── tslint.json # TSLint config File
└── yarn.lock # Yarn lock file
We use the scripts in package.json as a simple task runner
| Commands | Description |
|---|---|
| analyze | Runs build command and analyzes bundle size |
| build | Production build in dist folder (creates this if not existent) |
| e2e | Runs E2E tests for all installed browsers |
| headless | Runs E2E tests without opening a browser (using Firefox or Chrome headless mode) |
| lint | Runs tslint and automatically fixes all the simple errors |
| precommit | This is a pre commit git hook, where we run the lint/unit/e2e(headless) |
| reset | This will delete the dist and node_modules folder and reinstalls the dependencies |
| setup | Will install the (dev)dependencies, remove .git folder and run git init |
| start | This will start the development server with hot module reload |
| test | Runs the unit tests |
We use the official Vue.js style guide
| Library | Description | License |
|---|---|---|
| Axios | Promise based HTTP client | MIT License |
| Apisause | Axios + standardized errors + request/response transforms | MIT License |
| vue | Progressive JavaScript Framework | MIT License |
| vue-router | Official Router Package for Vue.js | MIT License |
| vue-class-component | TypeScript decorator for class-style Vue components | MIT License |
| vue-property-decorator | Vue property decorator | MIT License |
| vue-i18n | Internationalization plugin Vue.js | MIT License |
| vuex | Centralized State Management for Vue.js | MIT License |
| vuex-class | Binding helpers for vuex/vue-class-component | MIT License |
| Library | Description | License |
|---|---|---|
| Poi | Config free Webpack setup (but extendable with Webpack Chain) | MIT License |
| TypeScript | Typed superset of JavaScript | Apache License 2.0 |
| TSLint | TypeScript Linter | Apache License 2.0 |
| Husky | Easy git hooks in package.json | MIT License |
| TestCafe | E2E test framework (without selenium dependency 😌 ) | MIT License |
| Webpack Bundle Analyzer | Analyzes the webpack produced bundle size | MIT License |
| Jest | JavaScript Test Solution | MIT License |
| TS-Jest | Jest TypeScript Transformer | MIT License |
| Vue-Jest | Jest Vue Transformer | MIT License |
| Vue-test-utils | Utilities for testing Vue Components | MIT License |