1.0.5 โข Published 2 years ago
vanilla-tuto v1.0.5
Tuto is the short of Tutorial and the best/easier way to start creating a SPA using the best frameworks out there!
๐จ๐ปโ๐ซ Basic topics
- What is Vue?
- Single-File Components
- Reactivity in Depth
- Computed Properties and Watchers
- Props
- Slots
- Vuex Store v3 - Getting Started
- Vue Router v3 - Getting Started
- Jest Unit Tests (๐ช๐ธ)
๐ Features
- Basic login/logout state definition using Vuex Store v3.x.
- Basic Store configured using Vuex and Persist Plugin (stores/index.js).
- Basic "Home" and "Login" pages defined (src/pages/).
- Basic router configuration defined (/router.js).
- Basic GET request using Axios (Spotify Tracker API). This request needs an Authorization Bearer Token . For security purposes you can just set this token on environment files.
- Environment file example.
- Jest configuration defined.
- API Unit test included.
- Path alias defined (webpack.config.js).
- GitHub actions workflow example defined.
๐ Project Structure
tuto
โโ .babelrc
โโ LICENSE
โโ README.md
โโ babel.config.json
โโ jest.config.js // ๐ Unit tests configuration
โโ jsconfig.json
โโ package-lock.json
โโ package.json
โโ router.js // ๐งญ Handle page routes
โโ src
โ โโ App.vue
โ โโ assets
โ โ โโ css
โ โ โ โโ index.css // ๐จ Main stylesheet file
โ โ โโ favicon.ico
โ โ โโ logo.png
โ โ โโ screenshots
โ โ โ โโ login.png
โ โ โโ scripts
โ โ โโ api.js // ๐ก Handle api calls
โ โโ components
โ โ โโ MainSection.vue
โ โ โโ UserSessionLink.vue
โ โโ index.html
โ โโ main.js // ๐ชด Application's entry point
โ โโ pages
โ โโ Home.vue
โ โโ Login.vue
โ โโ SpotifyTracker.vue
โโ stores
โ โโ index.js // ๐พ Save general state of the app
โโ tests // ๐ Unit tests
โ โโ unit
โ โโ spotify.spec.js
โโ vue.config.js // ๐ฆ Vue framework setup
โโ webpack.config.js // ๐ฆ Bundler setup, alias and more
๐ Install
Install it locally in your project
npm install
npm run dev
๐งช Unit tests
npm run test