太原做网站的通讯公司,服装店的营销方法,网站 宗旨,网站名称大全创建项目
安装脚手架-----创建项目------选择自定义
sass基础语法
https://www.sass.hk/
sass语法有两个：sass(旧) scss(新)
1.scss语法
和less语法类似，支持嵌套，支持变量…
scss： $变量名
less： @变量名
$color:orange;
.box{width: 400px;height: 400px;borde…创建项目
安装脚手架-----创建项目------选择自定义
sass基础语法
https://www.sass.hk/
sass语法有两个：sass(旧) scss(新)
1.scss语法
和less语法类似，支持嵌套，支持变量…
scss： $变量名
less： @变量名
$color:orange;
.box{width: 400px;height: 400px;border: 2px solid $color;a{color: $color;}
}sass(旧)和stylus类似，需要去掉; 和 {}
style lang="sass" scoped
$color:orange
.boxwidth: 400pxheight: 400pxborder: 2px solid $coloracolor: $color/styleelement-ui组件库
链接: https://element.eleme.cn/#/zh-CN/component/installation
axios二次封装–api
storage封装
登录模块
1.构建登录基本架子
控制组件的样式
给组件加类名，添加的类名会直接渲染到组件的根元素上el-card class="login-card"通过组件标签名作为类名控制样式组件的根元素，有一个和组件名同名的类名
el-card/el-card .el-card渗透选择器加上scoped后，所有的样式只会作用于当前组件模板
但是 有时候我们也需要向下渗透，影响内组件内部的一些内容样式—深度作用选择器 去掉scoped（1） less /deep/ 选择器前面添加 /deep/（2） scss ::v-deep 选择器前面加 ::v-deep2.美化样式
style lang="scss" scoped
// 加上scoped后，所有的样式只会作用于当前组件模板
// 但是 有时候我们也需要向下渗透，影响内组件内部的一些内容样式---深度作用选择器
//去掉scoped
// （1） less /deep/ 选择器前面添加/deep/
// (2) scss ::v-deep 选择器前面加 ::v-deep
.login-page{min-height: 100vh;background: url(@/assets/login-bg.svg) no-repeat center;display: flex;align-items: center;justify-content: center;.el-card{width: 450px;margin: 0 auto;::v-deep .el-card__header{height: 80px;line-height: 40px;text-align: center;background-color: #727cf5;color: #fff;font-size: 18px;}}.tc{text-align: center;}
}
/style3.表单基础校验
在向后端发请求，调用接口之前，我们需要对所要传递的参数进行验证，把用户的错误扼杀在摇篮之中
element-ui的校验
el-form model属性 rules规则el-form-item 绑定prop属性el-input 绑定v-model正则校验
规则说明required非空校验pattern正则表达式 校验手机号格式 邮箱格式password: [{ required: true, message: '请输入密码', trigger: ['blur', 'change'] },{ pattern: /^\w{5,11}$/, message: '长度在5~11个字符', trigger: ['blur', 'change'] }]4.提交表单和重置功能
每次点击按钮，进行ajax登录钱，对整个表单内容校验，通过校验才发送请求
//ref
el-form :model="formData" :rules="rules" ref="loginRef"
//添加点击事件
el-form-item class="tc"el-button type="primary" @click="login"登录/el-buttonel-button @click="reset"重置/el-button
/el-form-item
//调用组件方法 验证
methods: {login () {// 登录的时候 需要先校验 校验通过才能发请求// 校验 通过ref和$refs 拿到el-form组件 调用组件的方法// console.log(this.$refs.loginRef)this.$refs.loginRef.validate((isOk) = {if (isOk) {console.log('成功')} else {console.log('error ')return false}})},reset () {this.$refs.loginRef.resetFields()}}5.登录功能
封装API登录请求模块，vuex构建user模块存token
token存入vuex的好处 ，易获取 响应式vuex需要分模块----user模块vuex刷新会重新初始化，缓存的数据会丢失----本地存储也要存 登录功能代码 6.错误统一处理
登录成功，需要给提示，错误提示通过响应拦截器统一处理未登录的用户，不可以访问首页，需要登录访问拦截
