电商项目的app学习笔记(二)---创建登陆界面
第一步:创建项目,并在vscode中打开并运行vue create vue-shop完成之后的项目结构:接下来在vscode中打开:并运行第二步:创建vue.config.js文件第一个设置:当 npm run serve后自动打开浏览器:第三步:选择合适的ui库pc端基本不用选:element-UI处于霸主的地位移动端的话比较多:mint-ui:饿了么团队(停止维护了)vux:vant:有赞的(
·
第一步:创建项目,并在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的轮播图
第十步:点击登陆可以登陆,若未登录则不可跳转(全局路由导航守卫)
第十一步:多个图标的滚动面板的实现
更多推荐
已为社区贡献16条内容
所有评论(0)