SpringBoot+Vue框架技术精讲与项目实战第11章Vue前端框架SpringBoot+Vue框架技术精讲与项目实战第11章Vue前端框架11.1Vue简介11.2Vue脚手架11.3目录结构11.4初识setup和ref11.5模板语法11.6生命周期钩子11.7reactive函数11.8初识Vue组件211.9深入setup11.10计算属性11.11条件渲染11.12列表渲染11.13watch监视11.14provide与inject11.15Vue路由11.16axios发送请求SpringBoot+Vue框架技术精讲与项目实战11.1Vue简介与知名前端框架Angular一样，Vue.js在设计上也使用了MVVM(Model-View-ViewModel)模式。MVVM模式本质上就是MVC的改进版，View绑定到ViewModel，然后执行一些命令，再向它请求一个动作，View和ViewModel之间通过双向绑定建立联系。ViewModel跟Model通讯，告诉它更新来响应UI，这样便使得为应用构建UI非常容易。3SpringBoot+Vue框架技术精讲与项目实战11.2Vue脚手架vue-cli是Vue的脚手架工具，它大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，搭建了一个测试环境。使用vue-cli前，要确保已经安装了最新版的Node.js和NPM。4SpringBoot+Vue框架技术精讲与项目实战11.2Vue脚手架使用vue-cli构建一个项目的步骤。（1）创建自己的工作空间，这里以D盘根目录为工作空间。（2）安装vue-cli，直接在cmd命令端口中输入如下命令：D:\>npminstall-g@vue/cli在cmd命令端口中输入如下命令查看版本：D:\>vue–V（3）在命令端口中输入命令，创建一个基于webpack模板的新项目D:\>vuecreatevue3-demo（4）在命令端口中，切换到项目路径D:\>cdvue3-demo5SpringBoot+Vue框架技术精讲与项目实战11.2Vue脚手架使用vue-cli构建一个项目的步骤。（5）输入命令，就可以启动这个项目D:\vue3-demo>npmrunserve项目启动成功后,控制台显示如右图所示。（6）打开浏览器，输入地址http://localhost:8080，页面输出如下图所示。6SpringBoot+Vue框架技术精讲与项目实战11.3目录结构使用VisualStudioCode打开项目vue3-demo，可以查看项目的目录结构。7node_modules目录用于存放项目的依赖项。public目录用于存放公共静态资源，该目录下的index.html是项目的主页，即入口html页面。src是项目的核心目录，assets子目录用于存放静态资源文件，如字体、图标、图片等，components子目录用于存放公共组件，使用vue-cli构建项目时，默认会在该目录下创建组件HelloWorld.vue。App.vue是根组件，main.js是项目执行...
