一、重新认识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 axios官方：https://github.com/axios/axios axios.get(url).then() axios.post() axios.put() axois.delete() axios({ url:'', headers:{}, data:{}, //post,PUT,DELETE,PATCH params:{} //get }) axios.get('',{headers:{}})
