Add documentation website for tutorial

[cristijora]

I created a documentation(similar to the one I sent in a PR for vuetable-2) and added in browser demos at the end of each lesson (up to lesson 13 so far) Results can be viewed here https://cristijora.github.io/vuetable-2-tutorial It was done quite fast so it might need some refinements. Let me know what you think about it.

[ratiw]

@cristijora This is really great. The playground is what I've been looking forward to for quite sometime, but didn't have an opportunity to learn it. I think we will need to make some adjustment to the stylesheet so that the playground section looks more different than the lesson itself. Might also need to tweak the code a little bit to make it fit nicely into the playground.

Also those images should now be replaced with the playground.

Upon a quick look into the markdown, it looks like the vuep component is doing the magic here. Can you point me to where I should learn more about it?

[cristijora]

Vuep docs can be found here https://cinwell.com/vuep/#/?id=demo There is not much to learn there. You can customize the look of it and change some config stuff. I think we could make use of this https://cinwell.com/vuep/#/?id=can-i-use-require And for some lessons save the files on github or require some components which are already in your repo (e.g https://github.com/ratiw/vuetable-2-tutorial/blob/lesson-12/src/components/DetailRow.vue)

Another alternative/option would be to generate jsfiddle code like Element-UI does http://element.eleme.io/#/en-US/component/radio (they have a try button which copies the code to jsfiddle) Code for that -> https://github.com/ElemeFE/element/blob/dev/examples/components/demo-block.vue#L172

[ratiw]

I was trying to integrate your vue-nav-tabs to put the CodeMirror in one tab (Code tab) and the Vuetable rendered html in another tab (Result tab). Because the code playground would get quite lengthy in later tutorial lesson and I want to show the Result tab first. But I can't seem to get it working the way I want.

The Code part shows up just fine with a weird blank space at the bottom (I think it's because of the vuep CSS somewhere), but the Result part will not show anything until I click to show the Code tab first. Any idea on this?

[cristijora]

Can I see this online somewhere or get that code and test ? Sorry accidentally closed the pr. On mobile

[ratiw]

I've got the modified code from your PR that I don't want to push to my master branch yet. How can I push to your branch?

[ratiw]

@cristijora Just push to cristijora-master branch of vuetable-2-tutorial.