Skip to main content

Vue Project Notes

Note: The content of this project knowledge note comes from Bilibili Shangguigu video

How to install Vue-cli​

# Install cnpm (domestic yarn?)
npm install -g cnpm --registry=https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org



# Install vue cli  
cnpm isntall -g @vue/cli # -g means global installation
# Check vue cli version
vue -V

vue create vue_xxx

Problem of invalid python environment variable configuration​

image-20220115145506444

Project Structure Description​

components: Place non-route files

views/pages: Place route files

Project Knowledge Notes​

Points to Note​

  1. After copying html style, pay attention to the path corresponding to the image (images may be in html, style)

Permission control during router configuration​

Some permissions can be controlled through meta configuration in route;

{
    path:'/home',
    name:'home',
    component: () => import('@/pages/Home/'),
    meta: {isShow: true}
}

param query parameter passing​

    // 1.0 String format
    this.$router.push('/search/'+ this.wd + "?k="+ this.wd)
    // 2.0 Template string
    this.$router.push(`/search/${this.wd}?k=${this.wd.toUpperCase()}`)
    // 3.0 Object notation
    this.$router.push({
        name:"search",
        params:{
            wd: this.wd,
        },
        query:{
            k:this.wd.toUpperCase(),
        }
    })

    // Interview Question 1 Route passing parameters (object notation) Can path be used with params?
    // When routing jump passing parameters, object notation can be path, name. But when path notation is used, params parameter passing is not supported
    this.$router.push({
        path: '/search',
        params:{
            wd: this.wd,
        },
        query:{
            k:this.wd.toUpperCase(),
        }
    })

    // Interview Question 2 How to specify params parameters as optional
    // Placeholder has been configured in router, but params parameter is not passed, path is missing http://localhost:8080/#/?k=KJKJ
    // If you want it to be optional, add a question mark when placing a placeholder path:'/search/:wd?'
    this.$router.push({
        name:"search",
        query: {
            k: this.wd.toUpperCase(),
        }
    })

    // Interview Question 3 params parameters can be passed or not, but how to handle if an empty string is passed
    // Use undefined: Problem of passing empty string when params parameter can be passed or not
    this.$router.push({
        name:"search",
        params:{wd:'' || undefined},
        query: {
            k: this.wd.toUpperCase(),
        }
    })

	{
		path:'/search/:wd?',
		name:'search',
		component: () => import('@/pages/Search'),
		meta: {isShow: true},
		// Interview Question 4 Can routing components pass props data
		// Method 1 Boolean notation and only can pass params parameters
		// props: true
		// Method 2 Object notation
		// props: {a:1,b:2,wd:'aaa'}
		// Method 3 Function notation Can pass param parameters query parameters to routing components through props
		props:($route) => ({wd:$route.params.wd, k:$route.query.k})  
    }
// Error handling Uncaught (in promise) NavigationDuplicated
// Declarative navigation does not have this problem because the underlying layer handles it well, while programmatic navigation has problems
// By passing the corresponding success and failure functions to the push method, the current error can be captured, but it is a temporary solution not a permanent cure
// Still need to handle it when used elsewhere
// this.$router.push({
//   name:"search",
//   params:{
//     wd: this.wd,
//   },
//   query:{
//     k:this.wd.toUpperCase(),
//   }
// },()=>{},(error)=>{});


// Error handling Uncaught (in promise) NavigationDuplicated
// First save the push of the VueRouter prototype object
let originPush = VueRouter.prototype.push;
// Rewrite push/replace 
VueRouter.prototype.push = function (location, resolve, reject) {
    if (resolve && reject) {
        // call/apply both can call the function once, tamper with the context of the function once
        // call passes parameters separated by commas, apply method execution passes array
        // Here this ensures context is Router instance
        originPush.call(this, location, resolve, reject);
    } else {
        originPush.call(this, location, () => { }, () => { });
    }
}

Throttling and Debouncing​

Debounce: User operates frequently, only executed once;

Throttle: User operates frequently, curb the frequency of user execution;

Agreement
The code part of this work is licensed under Apache License 2.0 . You may freely modify and redistribute the code, and use it for commercial purposes, provided that you comply with the license. However, you are required to:
  • Attribution: Retain the original author's signature and code source information in the original and derivative code.
  • Preserve License: Retain the Apache 2.0 license file in the original and derivative code.
The documentation part of this work is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License . You may freely share, including copying and distributing this work in any medium or format, and freely adapt, remix, transform, and build upon the material. However, you are required to:
  • Attribution: Give appropriate credit, provide a link to the license, and indicate if changes were made.
  • NonCommercial: You may not use the material for commercial purposes. For commercial use, please contact the author.
  • ShareAlike: If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.