Setup VueJS

A Vue.js project in Typescript

Disclaimer

THIS IS WORK IN PROGRESS

Dependecies

• All dependecies of vuejs/webpack except babel* & eslint
• yarn add tslint
• yarn add vue-class-component html-loader
• yarn add bootstrap-sass sass-loader sass-node
• yarn add font-awesome

TSLint

• We follow the tslint-config-shopify tslint config

Build Setup

# install dependencies
yarn

# serve with hot reload at localhost:8080
yarn serve

# build for production with minification
yarn build

# build for production and view the bundle analyzer report
yarn build --report

ToDo

• Refactor vue/cli-webpack to TS
• Add vue-class-component
• Add tslint (split *.vue into ts & html file)
• Add global sass file
• Add bootstrap
• Add font-awesome
• Add polyfills (copy from angular)
• Add logger
• Add config
• Add localstorage helper
• Add karma unit testing
• Add prettier support
• Add vue-i18n
• Add Vuex (draft)
• Add Axios (draft)

Issues

• TSLint (and Vetur) has no support for *.vue files. Fallback to ts & html files.

Resoources

Typescript in VueJS https://github.com/ulaval/modul-typescript-template https://github.com/locoslab/vue-typescript-component-example https://github.com/Toilal/vue-webpack-template

Other VueJS setups https://github.com/vuejs/vue-curated-client https://alexjoverm.github.io/2017/06/28/Integrate-TypeScript-in-your-Vue-project