China, Northeast Forestry University, Software Engineering, Frameworks for Web Application, 2020

Web系统框架，是东北林业大学软件工程专业第6学期的一门专业选修课。
主讲教师：王波老师

课程前部分，基于Springboot框架的后端微服务架构、设计**与实现技术。
课程后部分，基于Vue框架的前端MVVM设计模式、组件化设计与单页面开发技术。

开发环境/框架及版本

• VS Code 1.42
• Node.js 12.16
• Vue 2.2.11
• VueX 3.1.2
• Axios 0.19.2
• Git 2.24

课程视频资料

• https://mooc1-1.chaoxing.com/course/208931964.html

https://vuetifyjs.com/zh-Hans/

Vuetify是基于Vue.js的的UI框架，基于Google Material Design设计**与规范
提供了大量基于Material Design设计的组件，Cards/Alerts/Lists；以及Calendars/Color Pickers/TreeView等扩展组件

为什么不选用国内更流行的element-ui？
element-ui是一款优秀的Vue.js UI框架，是凝聚了饿了么大量优秀前端工程师心血的开源项目
最开始我用的也是element-ui，但一次侧边栏内功能文字过长超过侧边栏默认宽度，当尝试调整时，使用一种方法修改就会引发另一种问题，滚动条/字体别切断不完整/字体覆盖等等各种问题。
最后搜索尝试了Vuefity，非常喜欢，就再无法切回到element-ui
相对于element-ui，我也更喜欢Vuetify的主题配色，Card等效果

https://vuetifyjs.com/zh-Hans/getting-started/quick-start/

npm安装
main.js引入模块
html引入字体/图标样式

https://vuetifyjs.com/zh-Hans/components/application/

在App.vue根组件开始，声明使用vuetify组件

Grids
https://vuetifyjs.com/zh-Hans/components/grids/
经典12x栅格布局

Cards; Lists; Icons; Dialogs

Deserialize Request Objects

Promise

xlsx

Axios Interceptors; Nested Routes; SessionStorage; CORS

Axios; Mock; Vuex & Axios & Mock

Vuex

Data; Computed; Router Passing Params; Reuseable Components; Template Syntax; Lifecycle Hooks; Keep-alive; Directives; Event Handling; Form Input Bindings; Watch;

基本组件；基本路由

init