电商项目的app学习笔记（二）---创建登陆界面

第一步：创建项目，并在vscode中打开并运行

vue create vue-shop

完成之后的项目结构：

接下来在vscode中打开：并运行

第二步：创建vue.config.js文件

第一个设置：当 npm run serve后自动打开浏览器：

第三步：选择合适的ui库

pc端基本不用选：element-UI处于霸主的地位
移动端的话比较多：

mint-ui:饿了么团队（停止维护了）
vux:
vant:有赞的(推荐)https://vant-contrib.gitee.io/vant/#/zh-CN/tag
cube-ui：滴滴的（推荐）https://didi.github.io/cube-ui/#/zh-CN

本项目选择的ui框架是滴滴的cube-ui

第四步：ui框架的安装

安装：

vue add cube-ui

当然，按照官网所说，如果你打算用在一个新项目中使用cube-ui,可以通过它们提供的一套基于vue-cli实现的脚手架模板去初始化cube-ui项目的配置和基础代码，这样你就可以忽略安装的步骤，直接看使用部分：

接着项目中就会有对应的项目结构生成：

这里报错了，因为cube-ui是基于stylus的，所以在项目中还需要安装对应的loader

npm i stylus stylus-loader

第五步：cube-ui的初步使用

注册界面的form使用：

<template>
    <div>
        <cube-form
            :model="model"
            :schema="schema"
            @submit="submitHandler"
        >
        </cube-form>
        <!-- model 就是整个表单需要的数据源，schema 就是生成表单所定义的模式 -->
    </div>
</template>
<script>
export default {
     data() {
        return {
            model: {
                username:'',
                password:''
            },
            schema: {
                fields: [
                    //用户名配置
                {
                    type: 'input',
                    modelKey: 'username',
                    label: '用户名',
                    props:{
                        placeholder:'请输入用户名'
                    },
                    rules:{
                        //校验规则的指定
                        required:true,
                        type:'string',
                        min:3,
                        max:15
                    },
                    trigger:'blur',
                    messages:{
                        required:'用户名不能为空',
                        min:'用户名不得小于3个字符',
                        max:'用户名不得超过15个字符'
                    }
                },
                //密码配置
                {
                    type: 'input',
                    modelKey: 'password',
                    label: '密码',
                    props:{
                        placeholder:'请输入密码',
                        type:'password',
                        eye:{
                            open:false
                        }
                    },
                    rules:{
                        //校验规则的指定
                        required:true
                    },
                    trigger:'blur'
                },
                 //按钮
                {
                    type: 'submit',
                    label:"注册"
                }
                ]
            }
        }
    },
    methods:{
        submitHandler(e){
            e.preventDefault()
            console.log('我注册了')
        }
    }
}
</script>
<style scoped>

</style>

具体的用法展示：

第六步：使用vue.config.js来配置使用Mock数据

1，模拟后台数据，模拟后台对请求的反应：

（下图应该是req.query。这里写错了）

2，下载安装axios，配置由客户端发起请求

npm install axios

然后重启项目：

npm run serve

第七步：完善路由配置，和界面的布局

第七步：实现登陆的业务逻辑处理

1，mock模拟后台对请求的处理

第八步：编写axios的请求拦截和响应拦截

这个要区分于router的路由导航守卫，路由导航守卫是对路由跳转进行拦截和处理
而axios的请求拦截器，则是对每次的axios请求和相应的拦截进行处理。

例如，我在每次返回的时候，增加一个测试信息：

第九步，首页的编写-cube-ui的轮播图

第十步：点击登陆可以登陆，若未登录则不可跳转（全局路由导航守卫）

第十一步：多个图标的滚动面板的实现