https://github.com/xjreb/skeleton-vue-typescript

A skeleton project with Vue.js, TypeScript, Bootstrap, Less, Webpack, and Jest.
https://github.com/xjreb/skeleton-vue-typescript

bootstrap jest less typescript vuejs webpack

Last synced: about 1 month ago
JSON representation

A skeleton project with Vue.js, TypeScript, Bootstrap, Less, Webpack, and Jest.

• Host: GitHub
• URL: https://github.com/xjreb/skeleton-vue-typescript
• Owner: xJREB
• Created: 2018-08-02T11:05:44.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T08:56:51.000Z (about 2 years ago)
• Last Synced: 2023-03-01T12:25:42.355Z (almost 2 years ago)
• Topics: bootstrap, jest, less, typescript, vuejs, webpack
• Language: JavaScript
• Size: 2.45 MB
• Stars: 4
• Watchers: 1
• Forks: 2
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue.js TypeScript Frontend Skeleton Project

> A skeleton project with Vue.js, TypeScript, Bootstrap, Font Awesome, Less, Webpack, and Jest.

## Structure

-   `src/app.ts`: main file of the app that loads and configures all dependencies and kickstarts the parent Vue component

-   `src/App.vue`: parent Vue component with basic app skeleton with header/nav, body, and footer

-   `src/routes.ts`: configuration of routes (`route`: binding a `component` to a certain `path`)

-   `src/views/`: directory for all views; should be structured according to domain concepts

-   `src/common/`: directory for shared functionality that is not specific to a certain view or domain concept

-   `src/config/index.ts`: configuration file with app or environment specific properties (e.g. to change the used Bootswatch theme)

-   `test/`: directory for all tests

## Build Setup

```bash

# install dependencies

npm install

# serve locally with hot reload (localhost:9000, adjustable in webpack.dev.config.js)

npm start

# build for production with minification

npm run build

# run TypeScript linter

npm run lint

# run tests and create coverage reports

npm test

# run SonarQube analysis (configure sonar-project.properties first or pass parameters to choose the SonarQube instance)

npm run sonar

```

## Useful VSCode Extensions

-   Vetur (helps with Vue SFCs)

-   TSLint (enforces coding rules in `tslint.json`)

-   Prettier (formats Vue files)

-   EditorConfig (enforces code formatting in `.editorconfig`)