Simple Example of Tic Tac Toe built with Vue
sesinfo2019-vue-tictactoe
Simple example of Tic Tac Toe built with Vue, used as lecture support material in SESINFO 2019 (slides here).
The structure of this project was generated with Vue CLI. If you've never gotten into building front-end projects using this kind of tool, here's the tip: install Node before you start.
Installing
After cloning the repository, on a terminal in the project directory, run:
npm install
Using
Still in a terminal in the project directory, just run:
npm start
This will run the application in development mode. Open [http: // localhost: 8080] (http: // localhost: 8080) to view in your browser.
In development mode, the page automatically reloads if you make changes. Play with the source code to get deeper!
Know more
You can learn more about designing and configuring Vue projects through [Vue CLI documentation] (https://cli.vuejs.org/guide/). To learn framework Vue itself, take a look at the [Vue documentation] (https://br.vuejs.org/).
** Still have questions? ** You can find the author of talk who originated this material from the [Vue.js Brasil communities] (https://github.com/vuejs-en/communities).
Feeling against it?
Are you experiencing a moment of anguish over finding this example in Vue and prefer React? No problem, go right now to the [React version] (https://github.com/ErickPetru/sesinfo2019-react-tictactoe) that was built for the same talk that originated this material.
Since talk's main goal was to provide an overview between Vue and React, how they resemble many things, and how they differ in some others, it may be a good opportunity to compare how some common concepts are implemented in these two ecosystems.