本片文章是潘老师针对基于Vue前后端分离手机商城项目综合实训课程的汇总，前置知识需要掌握web前端开发、Java基础、Java Web基础以及Java SSM三大框架、Mysql数据库等，下面将此次实训课程汇总如下（其中部分不足，可有待后续补充）：
第1部分：前置知识补充及Vue基础
第4部分：axios异步请求
第6部分：vuex基础
第9部分：商城项目前端搭建-移动端和PC端
提示：部分功能模块可自行练习完成
提示：PC端潘老师只给出了布局搭建，具体的菜单表格等组件使用来实现增删改查、分页等功能，可参考ElementUI官网
第10部分：商城项目后台开发
提示：至此应该已经可以尝试完成增删改查，分页等功能，潘老师没有写专门的文章来实现增删改查，后续可以补充上来，另外如果功能都使用postman测试不存在跨域问题，如果使用浏览器测试会存在跨域问题，在后面服务器部分我们会解决该问题
第11部分：服务器搭建
说明：前端代码部署在Nginx服务器，后端代码部署在Tomcat服务器（不做说明），图片资源存放在图片服务器
第12部分：学生项目展示
-
PascalCase：帕斯卡命名。各单词首字母大写
-
camelCase：驼峰命名。首字母小写，其他单词首字母大写
<!-- 为了防止页面数字被识别为电话号码，可根据实际需要添加： --> <!-- 让添加到主屏幕的网页再次打开时全屏展示，可添加： -->
统一使用二个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
-
Vue 的组件名也为 Html 的标签，参考此项根据
为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：
- 其他元素都有加上关闭标签
注：Vue 自定义元素为非自闭合元素！！！
<p>我是一段文字，我有始有终，浏览器能正确解析</p>
- 元素属性值使用 双引号 标记，禁用单引号
- 元素属性必须有值，不允许省略
- 如无特殊情况，禁用 ID，特殊情况见该项说明部分。
页面 ID 不能重复的特性，会导致很多页面失效。
如果项目使用 ID 值，有两种可能性。
情况一：作为上下文对象，全局唯一。一般为 Vue 的主控制器
情况二：自己控制 ID 值的编码，保障全局多次产生时不唯一。
其他的情况，皆可以使用 DOM 的 el 查找来实现。
- 标签嵌套标签时，必须换行
- 行级元素不允许嵌套块级元素
<!-- 正确示例， 标签嵌套标签时，必须换行 -->
-
注释内容前后各一个空格字符
-
注释位于要注释代码的上面
用于描述模块的名称以及模块开始与结束的位置
-
尽量填写 alt属性，alt 不能为无意义字符，需要能表现出图片的含义，如图片为道具图，则应该为道具的名称
- 图片名称必须小写，禁止使用特殊字符、中文
- 使用英文或拼音缩写，禁止特殊字符
- 名称间隔使用
- 符号
- 命名需要能体现图片的大概用途
- 禁止文件名和实际图片内容不符。
反面例子：图片名为 weixin-qrcode，图片内容却是头像。
- PC平台单张的图片的大小不应大于 500KB
- 移动平台单张的图片的大小不应大于 100KB
- 上线的图片都应该经过压缩处理，压缩后的图片不应该出现肉眼可感知的失真区域
60质量的 JPEG 格式图片与质量大于60的相比，肉眼已看不出明显的区别.
因此保存 JPEG 图的时候，质量一般控制在 60.
若保真度要求高的图片可适量提高到 80，图片大小控制在 500KB 以内
样式选择器，属性名，属性值关键字全部使用 『小写字母 + 下划线』 书写。
- 尽量少用通用选择器
*
- 禁止使用层级过深的选择器，最多3级。
- 不使用无具体语义定义的标签选择器
- 除非是样式
reset 需要，禁止对纯元素选择器设置特定样式，避免样式污染
//会导致页面所有的a标签都被加上背景 //后期修改可能会添加一些span标签，如果刚好在div里面，会被污染；不利于后期维护
样式书写一般有两种：一种是紧凑格式 (Compact)，约定统一使用展开格式书写样式：
一种是展开格式（Expanded）
每个属性声明末尾都要加分号；
左括号与类名之间一个空格，冒号与属性值之间一个空格
逗号分隔的取值，逗号之后一个空格
为单个 css 选择器或新申明开启新行
属性值十六进制数值能用简写的尽量用简写
- 命名使用英文，禁止使用特殊字符
- 涉及数据、交互等需要联调的部分，禁止通过id选择器定义样式，以免开发过程中id名变化，引起页局错乱
- 基于姓氏命名法（继承 + 外来）
祖先模块不能出现-，除了是全站公用模块，如 mod- 系列的命名：
<!-- 这个是全站公用模块，祖先模块允许直接出现`-` -->
在子孙模块数量可预测的情况下，严格继承祖先模块的命名前缀
当子孙模块超过4级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块
注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行
考虑到 SCSS 语法对 CSS 语法友好的兼容性和扩展性，我们在使用 SASS 编写样式的时候，统一使用 SCSS 语法。
SASS 支持 CSS 标准的多行注释 /* */，同时也支持单行注释 //。
- 多行注释在使用非 Compressed 模式进行编译后的输出文件中会保留下来，单行注释
// 侧会被移除
- 多行注释和单行注释在 SASS 编译后输出的压缩 CSS 文件都会被移除
- 当多行注释内容第一个字符是感叹号 “!” 的时候，即
/*! */，SASS 无论用哪一种编译方式编译注释都会保留
- 注释内容可以加入 SASS 变量
- 全部遵循
CSS 注释规范
- 注释内不放 SASS 变量
可复用属性尽量抽离为页面变量，易于统一维护
共用变量，必须使用 @include 调用，避免编码时重复输入代码段
如果不调用则不会有任何多余的 css 文件，占位选择器以 % 标识定义，通过 @extend 调用
注意：#{} 是连接符，变量连接使用时需要依赖
运算符之间空出一个空格
注意运算单位，单位同时参与运算，所以 10px 不等于 10，乘除运算时需要特别注意
有较多文字的文章类页面：
如果页面无文字，或者不希望文字被长按选中，可使用下面的reset；适合于大多数专题页面
