重新认识vue-cli

1. 安装最新版本脚手架

vue-cli官网:https://cli.vuejs.org/zh/

目前版本：v4.5.x

安装：npm install -g @vue/cli

2.使用vue脚手架创建项目

第一种命令行
vue create 项目名（字母开头，不要大写） 回车

default (自动安装)
manually （建议：手动安装）

第二种：以图形界面方式创建
vue ui 

3.vue-cli4.5目录结构

public
	index.html ---入口html页面
	静态资源--json文件
src
	assets:资源文件（字体，图标，图片）'
	components:存放公共组件
	router:路由文件
	store:存放vuex状态管理
	views:存放页面
	filters:存放过滤器文件
	directives:存放自定义指令文件夹
	mixins:存放混入方法
	utils:存放一些封装的公共方法(js文件)
	http:存放封装的http接口请求
	App.vue 根组件
	main.js 项目执行的入口js
	
.gitignore:git提交时忽略文件
.babel.config.js babel配置文件
.eslintrc.js  EsLint配置文件（代码质量检查配置）
package.json  node配置依赖文件
README.MD 项目的说明文档
vue.config.js 配置webpack环境

	禁用Eslint代码检查：

4.项目开发前的环境准备

初始样式
reset.css

适配环境：rem,vw,vh,flex

xxxrem=xxxpx/html根字号

例如：0.44rem=44px/100

px转vw,rem的插件：

   @moohng/postcss-px2vw
   
npm地址：https://www.npmjs.com/package/@moohng/postcss-px2vw

安装：
npm install @moohng/postcss-px2vw --save-dev

svg图标：放大不失真，可以通过css来调整样式

1.直接复制svg代码，缺点：代码量比较大  <svg><path></path></svg>
2.直接当作img图片来处理
3.svg sprites: svg 雪碧图
每时每课移动官网参考：https://wap.365msmk.com/

拼接规则：Bearer Token值 【Bearer 和token 中间有个空格】

最终token:
token="Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vd3d3LjM2NW1zbWsuY29tL2FwaS9hcHAvbG9naW4iLCJpYXQiOjE1OTc3MzU5MDgsImV4cCI6MTU5ODAzODMwOCwibmJmIjoxNTk3NzM1OTA4LCJqdGkiOiJ5cHprUEZoR2tPNG12dUJtIiwic3ViIjoxMDM1LCJwcnYiOiI5ZjFmZTllMGRmZmJlNDQ0MmRjNzgzMTA3NTFmNTkxY2Y0ZDE0MDIwIn0.83iYh0sl_2nLYtuS2sYrdG-KqxT8RUFCY6GXuYNLcuE"

用户登录返回的信息如下：

其中：remember_token是登录后返回的token

{
    "code": 200,
    "msg": "操作成功",
    "data": {
        "id": 1035,
        "login_name": "ZYWX_cZTZaG",
        "nickname": "187****7036",
        "password": "$2y$10$0fevJTLyNT509V2ZQvQfk.Z2usUlwJeG5.c76MjeQzBVuvWc8IOt6",
        "email": "",
        "avatar": "https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/avatar.jpg",
        "remember_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vd3d3LjM2NW1zbWsuY29tL2FwaS9hcHAvbG9naW4iLCJpYXQiOjE1OTc3MzU5MDgsImV4cCI6MTU5ODAzODMwOCwibmJmIjoxNTk3NzM1OTA4LCJqdGkiOiJ5cHprUEZoR2tPNG12dUJtIiwic3ViIjoxMDM1LCJwcnYiOiI5ZjFmZTllMGRmZmJlNDQ0MmRjNzgzMTA3NTFmNTkxY2Y0ZDE0MDIwIn0.83iYh0sl_2nLYtuS2sYrdG-KqxT8RUFCY6GXuYNLcuE",
        "id_card": "0",
        "mobile": "18738767036",
        "sex": 3,
        "birthday": "0",
        "is_new": 1,
        "is_buy": 2,
        "wx_openid": "",
        "qq_openid": "",
        "integral": 0,
        "user_from": "PC",
        "province_id": 0,
        "city_id": 0,
        "district_id": 0,
        "last_login_ip": "100.120.136.93",
        "last_login_time": 1597735908,
        "status": 1,
        "created_at": "1597735908",
        "updated_at": "1597735908",
        "deleted_at": 0,
        "inviter_id": 0,
        "is_fill_information": 0,
        "meaage_openid": "0",
        "tube_teacher": "",
        "tube_teacher_id": 0,
        "is_remove_error_ques": 0,
        "source": "自行注册",
        "join_status": 0,
        "public_ocean": 0,
        "last_talk_at": 0,
        "uid": ""
    }
}


登录接口：

1.获取验证码：
  接口地址：https://www.365msmk.com/api/app/smsCode
  请求方式：POST
  请求参数：
    mobile: 手机号
    sms_type: 验证码类型  "login" 用于登录
    
2.登录：
接口地址：https://www.365msmk.com/api/app/login
  请求方式：POST
  请求参数：
   mobile: 手机号
   sms_code: 获取到的验证码
   type: 2  1：账号密码登录  2：短信验证码登录
    
3.获取用户信息：
接口地址：https://www.365msmk.com/api/app/userInfo
  请求方式：POST
  请求参数：
   mobile: 手机号
   sms_code: 获取到的验证码
   type: 2  1：账号密码登录  2：短信验证码登录
   
   
   
id	int	用户ID
nickname	string	用户昵称
sex	int	0 男 1女 3保密
birthday	string	生日
avatar	string	用户头像
mobile	int	手机号
province_id	int	省
city_id	int	市
district_id	int	区
is_vip	int	是否会员1是0否
vip	array	会员信息
vip_end_at	string	会员结束时间
province_name	string	省名称
city_name	string	市名称
district_name	string	区名称
attr_id	int	属性ID
attr_val_id	int	属性值ID
attr	string	属性名称
attr_value	string	属性值名称

4.课程分类

请求地址：https://www.365msmk.com/api/app/courseClassify?
请求方式：GET
    
5.课程列表接口
请求地址：https://www.365msmk.com/api/app/courseBasis
请求方式：GET

请求参数：
course_type	是	int	课程类型 10图文, 2大班课, 3小班课, 5视频课,8音频课, 9系统课
is_vip	否	int	1 会员课
classify_id	否	int	课程分类ID
limit	是	int	当页数量
page	是	int	页码
attr_val_id	否	string	属性ID，多个之间用逗号连接
keywords	否	string	课程名称搜索
order_by	否	int	1:最新 2:最热 3:价格升序 4:价格降序

6.课程详情
接口地址：https://www.365msmk.com/api/app/courseInfo/basis_id=课程id
请求方式：GET

返回的参数说明：
参数名	类型	说明
id	int	课程ID
title	string	课程标题
course_type	int	课程类型
course_classify_id	int	课程分类ID
price	int	价格
underlined_price	int	划线价格
sale_type	int	1:收费0:免费
status	int	状态
browse_base	int	浏览基数
sales_base	int	销售基数
browse_num	int	浏览数
created_at	int	创建时间
start_play_date	int	开始时间
end_play_date	int	结束时间
store_num	int	原始库存 (卖出数量+剩余库存 )
sales_num	int	卖出数量
classify_title	string	分类名称
course_details	string	课程详情
total_periods	int	课时
is_free	int	是否免费 1是
is_vip_course	int	1:会员课 0:非会员课
stock	int	剩余库存信息
is_playback	int	是否可以回放
is_collect	int	是否收藏 1:收藏
collect_id	int	收藏ID
is_vip_user	int	是否是会员 1:是
vip_user_end	string	会员到期日 如果是会员的话会有到期日
is_vip_course	int	是否是会员课程 1:是
is_join_study	int	是否加入学习 1:是

7.收藏
请求地址：https://www.365msmk.com/api/app/collect
请求方式：POST
请求参数：
page	是	int’	当前页码数
limit	否	int	每页显示数量
type	否	int	类型 1.课程 2.文库 3.图书 4.资讯 5.话题 6.面授 (不传则查询全部,目前只有课程收藏)

8.首页下面的课程列表
接口地址：https://www.365msmk.com/api/app/recommend/appIndex
请求方式：GET