vuetify_ts_aspnetcore_starter

🆒 A starter project for learning how to build simple web app with Vue 👍

Summary

This is a repository that demostrate how to make a web app with Vue. The simple web application contains:

• Layout elements like drawer, navigation bar...
• UI elements change by user interaction or URL change,
• Data table showing data loaded by external live API (Car park vacancy of Kowloon East, Hong Kong),
• Interactive Bar Chart showing stock price of selected company,
• A list showing navigation history stored in browser that persist after browser/tab closed.

The web app used the following technologies/libraries:

• VueJS: Front-end javascript framework for creating modern web application

  • vue-router: vuejs plug-in for client-side routing.
  • vuex: vuejs plug-in for client-side state management.
  • vue-class-component: allows writing Vue component like a class.
  • vue-property-decorator: enhance vue-class-component to make writing class-like Vue component more fun.

• Typescript: Type-safe superset of Javascript, allows you to write more strict code.

• Vuetify: Material design based UI Library for Vue.

• babel-polyfill: Make generated Javascripts compatiable with older browsers (e.g. IE11)

• axios: Library for making Ajax call easier

• lodash: Library for easier array manipulation

• chart.js: Powerful library for creating chart in Javascript

• webpack: Javascript package dependency resolver, build & pack all required resources into files for easier and more efficient deployment.

• ASP.NET Core: back-end technology stack, used to create the back-end to serve the resulting Javascript file generated by webpack.

  • aspnet-webpack, webpack-hot-, webpack-dev-middleware: allows ASP.NET Core to hot-reload the front-end web app upon changes on the fly, without restarting the back-end, and make browser auto reload the latest version.

Objective

Personally, I think learning Vue is fun, and is easier than Angular/React for me. If you want to know about VueJS, webpack and ASP.NET Core, you may refer to my another repository created earlier [Here].

Writing Vue in Javascript with routing and state management and pack them with webpack already takes some time to get used to; Writing Vue in Typescript is much steeper. It takes me around one week to figure out how to glue the stuff together and make it works.

This repository wants to help people reduce the time on finding such knowledge and learn how to make a minimal Typescript web app that contains UI, Charting, Persistence Storage, State Management and Routing without much pain.

Although ASP.NET Core is used as back-end, other technology like Node/Java can also be used.

How to build and try it?

1. First clone this repo via GitHub Desktop or git clone https://github.com/VerdantSparks/vuetify_ts_aspnetcore_starter

2. Restore dependency:

   1. dotnet restore
   2. npm install

3. Run ASP.NET Core: dotnet run

4. Open browser and type in url (default is http://localhost:5000) and you are good to go.

Some explanation, if you are interested...

• Make your Vue app support Internet Explorer:

  Only support IE11+, no support for too old browsers.

  1. add import 'babel-polyfill' in your main.js or main.ts
  2. add babel-polyfill package in the devDependencies/dependencies section in your package.json
  3. your webpack.config.js should change the entry section to use babel-polyfill, e.g. entry: { main: ['babel-polyfill','./spa_ts/main.ts'] }

• Use Typescript instead of Javascript:

  • add package typescript in your package.json
  • add file tsconfig.json in your project root folder

  {
    "compilerOptions": {
      "outDir": "./built/", <- set output directory for compiled JS from TS
      "sourceMap": true, <- easier for debug, used with webpack
      "strict": true, <- enable type check and other rules, the reason we use TS
      "noImplicitAny": true, <- all variables must have type defined
      "noImplicitReturns": false, <- if you want all function must define return type also, set it to true
      "module": "es2015", <- enable new JS features e.g. Promise
      "moduleResolution": "node", <- ^
      "target": "es5",            <- ^
      "experimentalDecorators": true <- required for vue-class-component & vue-property-decorator
    },
    "include": [
      "./spa_ts/**/*" <- specify source directories, here set it to all resources under folder spa_ts in project root folder
    ]
  }
  

  • add new rule in webpack.config.js, so webpack know to compile TS files, The option here set .vue file (usually Single File Component) as .vue.ts and then load by webpack.

  {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
          appendTsSuffixTo: [/\.vue$/]
      }
  }
  

License

MIT

Copyright (c) 2018-present, Ferry To@VerdantSparks

Contribute

If this repo helps and you want to contribute, you may consider donate a meal to my pets :cat::hamster::hamster::hamster::hamster::cat: [Here] 😎🤘

Pull request and forking is always welcome. 🍻