https://github.com/webmasterdevlin/ijs-vue-workshop
https://github.com/webmasterdevlin/ijs-vue-workshop
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/webmasterdevlin/ijs-vue-workshop
- Owner: webmasterdevlin
- Created: 2020-09-02T10:20:57.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-02T15:35:00.000Z (almost 5 years ago)
- Last Synced: 2025-01-26T13:42:35.611Z (5 months ago)
- Language: Vue
- Size: 782 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue3-course
```zsh
$ vue create ijs-vue-workshop
```
Push to Github
## Migrate to Vuejs 3
```zsh
$ vue add vue-next
```
## Upgrade to latest npm packages
- Need version lense VS extension
- Go to package.json
- Upgrade all packages
```zsh
$ rm -rf node_modules
```
## Project setup
```zsh
$ npm cache clean -f
$ npm install
```
### Compiles and hot-reloads for development
```zsh
$ npm run serve
```
### Compiles and minifies for production
```zsh
$ npm run build
```
### What to build in order
- upgrade/migrate to Vue.js 3
- npm i bootstrap 5 alpha
- npm i bootstrap-icon
- Navbar
- Heroes (class card)
- npm i vue-router 4
- Router
- npm i vuex 4
- Setup Vuex 4 - hero module
- Get Request (v-for)
- Delete Request (class btn btn-danger)
- Post Request (Form)
- Put Request (editingTracker, v-if, v-else)
- Vee Validation
- npm i -D vee-validate@next yup
- implement validation on Form.vue
- npm i jsonwebtoken
- npm i -D @types/jsonwebtoken json-server-auth
- Setup Vuex 4 - auth module
- Register
- Login
- update auth service
- authGuard
- update router with meta requiresAuth and router BeforeEach
- ForgotPassword
- ContinueAs
- Done! Now do the Villain part with its own page and Vuex module.
### Vuex Setup
- create store
- write a module
- write a state
- npm i axios
- write an api service
- write a type
- write an action
- write a mutation
- write a getter
- update components with mapGetters and mapActions
- npm i concurrently json-server
- copy-paste db.json