# Vue frontend

## Learn from [YouTube Lists](https://www.youtube.com/playlist?list=PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn)

## VScode tools
* Vetur https://marketplace.visualstudio.com/items?itemName=octref.vetur
* Vue 2 Snippets https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
* vue-beautify https://marketplace.visualstudio.com/items?itemName=peakchen90.vue-beautify

── frontend  // root
    ├─── .gitignore
    ├─── babel.config.js
    ├─── package-lock.json
    ├─── README.md
    ├─── vue.config.js  // config file  
    ├─── node_modules  // dependencies
    ├─── public
    |     └── index.html  // base html setting, title, metadata, icon
    └─── src
          │──── apis  // All api function
          |      │─── auth.js  // auth api for user login (without token)
          |      │─── common.js  // something api without token
          |      │─── https.js  // ajax interceptors for request and response, either hav errorHandle
          |      │─── index.js  // apiService for entry
          |      │─── utils.js  // something common function
          |      │─── admin  // api for admin
          |      │─── developer // api for developer
          |      └─── tmp  // old version, unused
          │──── app  // Website entry
          |      │─── App.vue  // Single Page Application index
          |      └─── main.js  // initial Vue framework
          │──── assets  // static assets, img, font, scss
          │──── components
          |      │──── base  // Some components for layoout
          |      |      │──── components
          |      |      |      │─── Footer.vue
          |      |      |      │─── MenuRoutes.js  // data for menu
          |      |      |      └─── SideBar.vue
          |      |      └──── AppLayout.vue  // Layout for extends
          |      │──── modals  // Some Modal components
          |      |      └──── projects  // Modal for projects
          |      |             └─── create.vue  // createProjectModal
          |      └──── HelloWorld.vue  // Example for helloworld
          │──── plugins  // thirdParty plugins
          |      │─── socketIO.js // initial socketIO and config
          |      └─── vuetify.js // initial vuetify and icon style
          │──── router
          |      │─── index.js  // routes collection
          |      │─── admin.js  // inherit admin layout and detect admin only routes
          |      └─── projects.js // inherit project layout and user only routes
          │──── store  // record website all of state
          |      │─── index.js  // import all custom modules
          |      │─── layout.js  // record layout state, i.e. version
          |      │─── snackbar.js  // record snackbar state, add new one and show
          |      └─── users.js // record user information and currect user
          └──── views
          |      │─── projects
          |      |      │─── Home.vue // project home page
          |      |      │─── Job.vue  // project job page
          |      |      └─── Lab.vue  // project lab page
          |      │─── About.vus  // unused page
          |      │─── Home.vus  // vuetify home page
          └      └─── Login.vus // Custon login page