构建一个vue项目

一.XX餐饮系统
订单模块、会员管理、支付模块、菜品管理、人事管理、财务管理、仓储管理。。。
技术架构：Spring Boot+Vue、Spring Security、Redis、MySQL

二.前后端分离介绍
前后端分离之后，后端将不再提供页面，只是单纯的提供接口，前端做数据渲染，页面跳转等等。移动互联火的时候，开发一个应用程序，很难做到只有 PC 端。

1.前后端分离的优势

1. 一套后端对应多个前端
2. 分工协作

2.前后端分离技术方案
后端1. SSM 2.Spring Boot 3.微服务 4.SSM+Dubbo
前端 1.Vue 2.EasyUI

三.SPA 单页面介绍
1.是什么
项目开发完成后，编译打包上线的时候，只有一个 html 页面。而且这个html页面没有内容，只有一堆 js、css引用，项目本身可能有很多页面，但是编译打包后只有一个页面。这种叫做 SPA（single page web application） 单页面应用。适合做企业级应用，不适合做互联网应用。

第一次进入页面时会请求一个html文件，刷新清除一下，切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容却变化了。

原理: js会感知到url的变化，通过这一点可以用js动态地将当前页面的内容清除，然后将下一个页面的内容挂载到当前页面上。这个时候的路由不再是后端来做了，而是前端来做，判断页面显示相应的组件，清除不需要的。

2.怎么用
https://blog.csdn.net/jiang7701037/article/details/93243545

3.优缺点
优点： 页面切换快 页面每次切换跳转时，并不需要处理html文件的请求，这样就节约了很多HTTP发送时延，所以我们在切换页面的时候速度很快。

缺点： 首屏时间稍慢，SEO差
单页应用的首屏时间慢，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。相对于多页面应用，首屏时间慢。

SEO效果差，因为搜索引擎只认识html里的内容，不认识js渲染生成的内容，SPA应用不易被搜索引擎收录，也就不会给一个好排名，会导致单页应用做出来的网页在搜索引擎上的排名差。

4.解决缺点
Vue官方提供了一些其他的技术来解决这些缺点，比如服务端渲染技术（SSR server side render），通过这些技术可以完美解决这些缺点，这样一来单页面应用对于前端来说就是非常完美的页面开发解决方案了。

四.vue简单使用
官网 https://uniapp.dcloud.io/
html页面

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

搭建vue项目

另一种搭建项目
1.下载安装node.js傻瓜式安装 https://nodejs.org/en/

2.检查是否安装成功：如果输出版本号，说明我们安装node环境成功

3.安装 Vue-cli 3.0 脚手架工具https://cli.vuejs.org/

# 安装 Vue-cli 3.0 脚手架工具
npm install -g @vue/cli
# 输出版本号安装cli环境成功
vue --version

4.创建项目vue2官网

进去手动设置


enter确认进去 选择yes…

cd到vue2目录里面输入npm run serve 启动项目,访问http://localhost:8080/看到vue页面

WS工具使用