web前端开发之vue常见问题

电商后台项目

一、上传gitee

因为我们的项目使用的是vue脚手架创建的

所以上传到码云的时候不需要再次进行初始化

gitee官网

登陆自己账户之后我们只需要新建仓库

输入自己的仓库名称直接点击创建即可

创建成功之后如下界面

我们只需要在你需要上传的目录中打开 Gie Bash Here

按照上面说明，进行本地操作

本地目录下新建 README.md ，可以使用 touch 命令，或者手动创建
添加 README.md 到暂存区 git add README.md
提交更改 git commit -m 'first commit 添加对应的远程仓库 git remote add origin … ，注意要使用自己的地址
推送本地仓库到远程仓库 git push -u origin master

二、配置Element -UI

安装element-ui

npm i element-ui -S

按需引入：

在入口文件main.js中引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

三、配置Axios

安装

npm install axios

配置

// 挂载axios
Vue.prototype.$http = axios;
// 配置axios基准地址
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

因为我们不止一个组件要使用Axios
所以我们同样要在main.js中引入axios
挂载axios之后我们就可以使用this.$http代替axios
配置基准地址是为了每次请求时不在输入避免麻烦

四、less-loader

我们使用到less语法时需要安装less 和 less-loader

npm install less less-loader -D

但是安装之后打包依旧会报错

在这里插入图片描述

这是因为 less 和less-loader不兼容导致的

解决方案：卸载高版本less-loader

npm uninstall less-loader

再安装低版本，从这里选择一个版本安装，比如 7.3.0

npm i [email protected]

五、设置全局样式

全局样式，就是所有或者大部分组件都需要用到的样式

可以在 App.vue 中直接设置，这样凡是通过 App.vue 中的路由出口展示的组件，都会使用此样式

但过路由出口展示的组件则不会使用，另外，如果样式过多，也很乱

推荐做法：

assets 中新建 css 目录
css 目录下新建 common.css
并在main.js中引入common.css

六、添加iconfont字体

不建议下载到本地引入因为包较大

在这里插入图片描述

我们需要将上面路径复制

并在public目录下的index.html中引入

<link rel="stylesheet" href="//at.alicdn.com/t/font_2421358_xludpml4fa.css">

然后使用icon图标即可

在这里插入图片描述

七、表单验证

给表单添加属性:rules=“formRules”，formRules是一堆验证规则，定义在script中
在data中定义formRules规则的具体内容

// 定义验证规则列表
      FormRules: {
    
    
        username: [
          {
    
     required: true, message: "请输入用户名", trigger: "blur" },
          {
    
     min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
        ],
        password: [
          {
    
     required: true, message: "请输入密码", trigger: "blur" },
          {
    
     min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
        ]
      }

注意的是：

FormRules下的属性名要与输入框绑定的属性名一致

通过的prop属性设置验证规则

<el-form-item label="用户名" prop="username">

八、异步改造

异步嵌套总是很多：

validate 的参数是回调函数
post 方法返回的虽然是一个 promise ，但promise 的 then 方法也是一个回调函数

promise 虽然结局了回调地狱的问题，但同时大量的链式调用也让人深恶痛绝，今天我们就一劳永逸的解决这个问题

async+await

让我们以一种更加优雅的方式调用执行 promise

await 关键字可以让 async 函数暂停执行，等执行完 await 修饰的函数，再继续执行函数后面的代码
await 函数修饰的函数返回值因该是一个 Promise，如上面的 validate 函数的返回值就是 promise
如果promise 内部执行成功，则执行 resolve 方法，返回值会作为 await 修饰函数的返回值
如果promise 内部执行失败，则执行 reject 方法，我们需要使用try catch 捕获这个异常。所以严格来说，我们应该使用 try catch 修饰

    async submitLogin(form) {
    
    
      try {
    
    
        await this.$refs.form.validate();
        // 验证通过执行登陆逻辑
        let res = await this.$http.post("login", this.loginForm);
        // console.log(res)
        const {
    
     msg, status } = res.data.meta;
        if(status == 400){
    
    
          // console.log(msg)
          this.message=msg
          return false
        }
        localStorage.setItem('token',res.data.data.token)
        this.$router.push('/home')
        // console.log(res.data)
      } catch (err) {
    
    
        this.message="验证不通过"
      }
    },

如果不使用try和catch的话：

await this.$refs.form.validate()不成立时控制台会报错

所以需要try嵌套 catch为失败执行