2021-05-11

一、使用vue-cli脚手架创建项目 vue create 项目名（可以在github上找相应的开发项目框架）

二、配置vue的配置信息，安装webpack打包工具 npm i - D webpack (注意版本问题)

三、选择你开发使用的样式，less/sass/stylus 例如:stylus预处理器 安装 npm i -D stylus stylus-loader

四、搭建项目目录结构

五、src源码文件目录

六、搭建路由vue-router 安装npm i -D vue-router 在router文件下创建 index.js 配置路由规则

七、测试路由组件是否切换跳转，测试成功即可，开始布局静态路由组件（在这之间必须在首页文件引入初始化样式来确定布局的方式）

八、搭建好的路由组件，及底部导航组件

九、使用编程式导航，编写，点击切换路由组件

十、在路由组件的下面拆分子组件，完成组件的细分，拆分父组件，实现整体的组件化（组件拆分的同时既是对组件的数据的重构 对每一个路由组件实现数据的重构，在子组件中使用插槽的方式使得子组件更加的简洁（数据的传递用props接受

1、父子件模板

2、 子组件模板

十一、在组件中使用swiper插件，安装swiper插件 npm i -D swiper 在组件中引入swiper插件模块和swiper的css基础样式 使用是，使用mounted的钩子函数配置swiper的配置信息

1、swiper插件模板

2、swiper插件的使用

十二、路由组件的跳转之 router-link 渲染成a标签（默认渲染成a标签，也可指定 tag=‘’ 标签）在这之前注册跳转的路由组件，增加相关的规则

使用router-link to=’/login’ 跳转到login的路由组件

十三、路由组件是否需要显示底部组件（）——FooterGuide.vue

1、在App.vue的FooterGuide组件设置 v-if

2、在router规则中设置个meta对象属性showFooter是否为true

十四、封装请求函数ajax.js, 定义多个接口函数去，使用封装接口函数，传入url地址，访问数据

1、封装个请求接口函数

2、定义多个接口，传入url地址调用封装的接口函数

3、解决浏览器访问跨域问题，蒙蔽浏览器，定义一个基础接口路径

十五、测试接口，在组件中去请求接口方法调用后台接口（在这之前，必须保证服务器运行）

1、async await 使用的ES7的语法

2、使用promise.then

3、输出结果

十六、使用vuex状态管理器管理数据，及它的使用和配置 安装 npm i --save vuex

1、vuex模块中需要准备5个基本配置模块 index.js 、action.js、mutation.js、state.js、mutation-type.js 、

1.1、index.js(vuex的管理模块)(并将vuex，挂载到main.js主入口文件)

1.2、action.js（封装方法，发送异步ajax请求，并提交给mutation.js,更新state的数据）

1.3 state.js (放置需要的数据类型，一般都是数组，还存在需要的参数的初始值)

1.4 mutations.js (通过action.js请求响应的数据，将响应得到的数据与state.js中的状态数据进行同步更新)

1.5 mutations-type.js (定义n个接收数据的的常量，这些常量都是mutations的名称常量)

十七、在组件中请求vuex 中的数据（不管在哪请求数据，都在mounted(){}函数中发送请求）

1、使用vuex中的方法请求（this.$store.dispatch(‘这里写你在action.js文件中你自定义的方法名’)）第二种方法是（在组件中引入mapAction函数，将action.js中自定义的方法封装成函数使用）

第二种方法：

2、在发送请求后，组件中读取state.js文件中的数据(读取数据引入mapState函数，在计算属性中读取数据computed:{}）

3、使用读取到的数据（读取到的数据一般是个数组）

3.1 子组件中需要向父组件获取数据，通过props选项获取数据，并将选项属性绑定到父组件的当前子组件上用来传递数据（并对标签中的数据进行重构动态显示）（数据重构分为，组件化，拆分组件，使用插槽，遍历标签）

父组件：

子组件：

十八、在Swiper轮播中使用vuex中请求的数据（根据此类轮播的效果，存在对n页，必须对.swiper-slide及a进行遍历，存在一个二位数组的遍历操作）

1、处理轮播中的数据，将一维数组，转为二维数组

分析：1、将请求到的数据进行解析得到
2、将请求到的一维数据重构成二维数据
3、利用计算属性Maxcategorys(){}
4、首先定义一个大数组，在定义一个小数组，将小数组放入大数组中
5、将请求到的数组遍历，当小数组的长度=8时，定义一个新的小数组
6、当小数组的长度为=0时，将小数组push到大数组中，
7、初始的时候小数组长度为0,所以将小数组放到大数组中，写在小数组===8时的前面
8、返回大数组

2、此时得到的效果，轮播无效，需要监听请求到的数据变化使用Watch监听数据，轮播配置new Swiper(),在页面加载之前和数组更新加载之前创建Swiper() (可使用vue中的api， vm.$nextTick(callback)方法)

十九、使用svg图，在数据请求缓慢响应到页面之前，先显示svg图（使用 v-if 和 v-else）

二十、组件中实现组件复用（在组件中经常会被使用到的一些特殊展示效果，例如星星）

样式：

代码模板：（通过props获取父组件的份数，例如3.2 3.5）3 0 2 3 1 1

父组件中需要在子组件的绑定score,size，用来为子组件传递参数

功能需求分析：需要遍历生成5个标签，并给5个标签绑定相应的类名（我们需要依赖父组件中的分数去计算一个新数组，给子组件遍历）
1、在计算属性中定义数组starclass(){}
2、得到分数score
3、定义一个空数组
4、在空数组里添加n个on，0/1个half ,n个off
5、定义3个类名变量
6、分数取整，3.2取3 Math.floor(score),for循环添加n个on类名
7、if（》=0.5）添加1个half类名
8、while(arr.length<5),添加n个off类名
9、返回数组

二十一、关于app的登录模块的布局，和对两个不同登录方式的切换操作（通过给定一个标志，data(){return{ issore=true}}）来绑定样式class是否存在，绑定点击事件进行切换

样式布局：在短信页面布局完成后，在短信页面布局的输入框部分增加输入框，更改短信页面布局，增加新样式，完成密码登录页面，给单个页面增加一个类名，用来控制单个页面的存在与否，后期通过点击事件来切换页面，完成页面切换效果（同理在切换两个文本的字体颜色，也是个单个文本添加一个类名，后期通过点击事件切换）(注意哪一条下划线用下边框布局样式)
vue中，通过对像的方式去绑定类名：class="{on:issore}",另外的页面或文本取反绑定，在组件中添加一个data选项，定义一个标志issor:true
通过给文本绑定点击事件，对组件中的data数组，进行操作，控制issore是true还是false

二十二、关于登录模块的功能需求

功能需求：
1、在输入正确的11位电话号码后，获取验证码字体高亮
解决：电话号码表单添加v-molde=‘phone’,(需要与后台接口文档一致)，定义phone数据
给获取密码绑定一个类名，用来改变字体颜色，是否添加类名的条件：class="{true/false}"
通过计算属性得到类名的布尔值（正则表达式，确定布尔值）

电话号码的正则规则，从1开始，后10位数字组成

2、当你输入正确的电话号码时，通过点击获取验证码，切换为已发送（30）s文本，里面的数字进行倒计时

解决：通过给文本中的动态变化的值30s,定义一变量数据，comTime=0,
给文本获取验证码添加点击事件，{{comTime>0 ？已经发送（${comTime}）s：’获取验证码‘}}
给点击事件添加一个方法，操作comTime,通过循环计时器，对comTime数值进行操作
注意：当你增加点击次数时，倒计时的时间间隔会缩短（所以，应该，在数值comTime不等于0时启动计时器）

3、当点击按钮时，密码由password变为text，并且按钮还有个滚动的效果


解决：这里需要准备一个password文本框，和一个text文本框，通过v-if来控制元素标签的存在与否，定义一个标志ishowpwd=false
v-if=“showpwd” text文本框，v-else,password文本框，给按钮添加个点击事情，当点击时，直接写在@：click=“showpwd=!showpwd”
小圆圈切换，使用两个不同的类名通过布尔值，用三元运算符，判断添加那个
注意：这里通过的是v-if可以销毁按钮元素标签，注意区分v-if和v-show的区别
（该功能思考是否能用添加类名的方式实现功能）

小细节：给圆圈按钮添加样式注意，加上动画使用css3样式控制，

二十三、学习阶段关于功能需求的小结

1、针对组件中的模板代码，需要其他模板的切换，需要指定一个公共类进行切换（要求书写CSS样式结合后期功能需求完善）
2、对与元素，点击绑定类名，有通过定义一个标志来绑定一个类名：class="{on:issore}" data{return{ issore=true/false}}
3、也可以通过，添加两个类名，用三元运算符 issore? “on”: “off”,添加类名
4、特点，找到变化的值，对变化值，通过标志来切换
5,切换文本，也使用三元运算符

二十四、收集表单中的数据，v-molde="";并给表单添加一个提交事件，写一个组件，用来提示用户输入的数据的合法性（采用正则表达式）（前台基础验证）s

1、给注册页面form表单添加提交事件，并阻止其默认行为

2、收集表单中的数据，进行验证它的合法性，并显示提示信息（将表单中的数据定义到data中）

3、在表单的login方法中验证数据的合法性，区分是短信登录，还是用户登录，对每个登录页面的数据，都取反验证它的合法性，可以使用正则表达式**/^\d{6}$/.test(code)**

4、编写一个组件中的内部组件，也是组件的一部分，将编写的组件注入到登录组件中

页面效果：

5、控制内部组件是否显示，在login组件中data中定义一个标志，一般为flase,在组件中使用v-show或v-if来控制，
在data中定义一个提示文本属性，将login组件中的提示信息传给内部组件，在显示在内部组件的文本中**（不需要给登录按钮绑定事件，直接交给表单操作）**


：基本操作实现原理图

6、在遇到功能需求是对标签元素或者是内部组件等其他组件，功能需求显示隐藏，都使用v-show或v-if

二十五、异步获取登录页面的数据，显示

1、获取一个新的图片验证码（这里准备的是远程SVG，直接是地址请求图片，每次请求都会更新图片验证码）

解决方法：‘使用远程地址？time’+Data.now(_);方法实现点击刷新

2、短信验证码登录异步获取数据(处理用户user对象数据)

当用户登录图形验证码输入错误时，要调用图形验证码得刷新得方法

业务逻辑：异步获取数据，得到数据对象，和提示异步数据失败提示、（都是通过接口的code属性判断）
1、关闭定时器、跳转页面到个人/首页、提示信息、 同理，用户名登录也是一样（可将代码提取公共部分）

3、在login组件中获取到得user用户数据，将数据同步保存到vuex中，保存后的数据，可以在个人组件中读取数据，并渲登录的用户名上

1、写一套vuex同步数据模板
store

motions-type

moution

action
在login组件中，发送保存的数据**（this.$store.dispatch(‘action中的函数名’，数据对象).）**

保存数据在vuex中，在个人组件中使用数据

个人中心的数据渲染

4、登录更新后，又会回到初始登录注册状态，登录更新要跳转路由，个人组件中的a那就是跳转到自己的个人信息页面userInfo

登录后其他的局部跳转


登录注册存在文本和图片切换时

5、实现自动登录（当你刷新页面时，不能保证登录状态）（因为当你刷新后，登录页面数据就不存在，无法显示已经登录的状态）

如何保证登录的状态
1、session的一次会话依赖于cookie,当浏览器打开时，建立一次session会话
2、cookie持久话，依赖于内存的，可自定义持久化多久时间保持这种状态，还有就是会话cookie
3、cookie是用来维护session的
解决：需要异步在从vuex中发送一个异步请求
action.js
可以在app打开后就调用getUserInfo()方法时时获取用户数据，在App.vue组件中调用
可以保持一天的自动登录，通过后台的cookie来控制的

6、退出登录

这里使用mint-ui,来解决（需要安装这两个依赖模块）
npm i --save mint-ui
npm i --save-dev babel-plugin-component
配置代码： [“component”, [
{
“libraryName”: “mint-ui”,
“style”: true
}
]]
]

在main.js中引入

使用标签


发送异步请求，重置vuex中的用户数据，需要写一套vuex的配置
moations-type

mouation

action