Vue common problems of web front-end development

E-commerce background project

1. Upload gitee

Because our project is created using vue scaffolding

So there is no need to initialize again when uploading to Code Cloud

gitee official website

After logging in to our account, we only need to create a new warehouse

Enter your own warehouse name and click Create

After the creation is successful, the following interface

We just need to open Gie Bash Here in the directory you need to upload

Follow the instructions above for local operations

• Create a new README.md in the local directory, you can use the touch command, or create it manually
• Add README.md to the staging area git add README.md
• Submit changes git commit -m'first commit Add the corresponding remote warehouse git remote add origin …, pay attention to use your own address
• Push local warehouse to remote warehouse git push -u origin master

Two, configure Element -UI

Install element-ui

npm i element-ui -S

On-demand introduction:

Introduce in the entry file main.js

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

Three, configure Axios

installation

npm install axios

Configuration

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

• Because we have more than one component to use Axios
• So we also have to introduce axios in main.js
• After mounting axios, we can use this.$http instead of axios
• The base address is configured to avoid trouble if it is not entered every time a request

Four, less-loader

We need to install less and less-loader when we use less syntax

npm install less less-loader -D

But after installation, the package will still report an error

This is caused by the incompatibility between less and less-loader

Solution: uninstall the higher version of less-loader

npm uninstall less-loader

Then install the lower version, choose a version to install from here, such as 7.3.0

npm i [email protected]

Five, set the global style

Global styles are styles that all or most of the components need to use

It can be set directly in App.vue, so that all components displayed through the routing exit in App.vue will use this style

But the components displayed through the routing exit will not be used. In addition, if there are too many styles, it will be messy

Recommended practice:

• Create a new css directory in assets
• Create a new common.css under the css directory
• And introduce common.css in main.js

Six, add iconfont font

It is not recommended to download to the local import because the package is large

We need to copy the above path

And introduced in index.html in the public directory

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

Then use the icon icon

Seven, form validation

• Add attributes to the form: rules="formRules", formRules is a bunch of validation rules, defined in script
• Define the specific content of formRules rules in data

// 定义验证规则列表
      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" }
        ]
      }

Please be aware of:

The attribute name under FormRules should be consistent with the attribute name bound to the input box

• Set the validation rules through the prop attribute

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

Eight, asynchronous transformation

Asynchronous nesting is always a lot:

• The parameter of validate is the callback function
• Although the post method returns a promise, the then method of the promise is also a callback function

Although promise ended the problem of callback hell, but at the same time a large number of chain calls are also abhorrent. Today we will solve this problem once and for all.

async+await

Let's call and execute promise in a more elegant way

• The await keyword allows the async function to suspend execution, and then continue to execute the code behind the function after the await-modified function is executed.
• The return value of the function modified by the await function should be a Promise. For example, the return value of the validate function above is a promise
• If the promise is successfully executed internally, the resolve method is executed, and the return value will be used as the return value of the await modified function
• If the internal execution of the promise fails, the reject method is executed, and we need to use try catch to catch this exception. So strictly speaking, we should use try catch modification

    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="验证不通过"
      }
    },

If you do not use try and catch:

When await this.$refs.form.validate() is not established, the console will report an error

So you need to try nested catch for failure execution