vue项目经验积累

你的名字 2022-12-29 04:56 112阅读 0赞

### vue功能：数组、对象深拷贝 ###

// 数组深拷贝
    var array=[1,2,453,12,432]
    var newArray=JSON.parse(JSON.stringify(vs))
    newArray.push(0)
    console.log(array)  //此时array值不会变化，两个值是独立存在的
    
    *********************************************************************
    
    // 对象深拷贝
    let origin = { 
    	name: '张三',
    	age: 12
    }
    let target=JSON.parse(JSON.stringify(this.origin));

// 计算属性
    computed: {   
         data: function () {   
             var obj={ };  
             obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是父组件传递的对象 
             return obj  
        }  
     }

### vue中如何使用less预处理语言 ###

第一步：首先使用npm下载依赖：`npm install --save less less-loader`

第二步：安装完成后检查是否安装成功  
在`package.json中`，查看是否存在：`less 和 less-loader`

"dependencies": { 
      "less": "^3.9",
       "less-loader": "^5.0.0",
       "vant": "^2.8.5",
       "vue": "^2.5.2",
       "vue-router": "^3.0.1"
     }

第三步：在main.js文件中引入

import less from 'less'
    Vue.use(less)

这里有个问题，提前说一下：因less-loader版本太高而报错，报错信息如下：

`loaderContext.getResolve is not a function`

解决方法：修改`package.json`文件：（直接修改里面的版本号）

"less": "^3.9",
     "less-loader": "^5.0.0",

将less和less-loader版本改为上述版本，然后重新`npm install`就可以运行成功了

### `this.$nextTick()`的使用场景 ###

[参考文档1][1]

[参考文档2][2]

使用场景：`this.$nextTick()`方法主要是用在`随数据改变而改变`的dom应用场景中。

vue中数据和dom渲染是异步的，要让dom结构随数据改变，应该放进`this.$nextTick()`的回调函数中。

created()使用方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时`this.$nextTick()`就会被大量使用。

created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。

### `iconfont` 字体图标库 ###

1.  下载好之后，将字体图标文件fonts,放在assets文件夹里面 assets/fonts
2.  在`main.js`导入

// 导入字体图标
    import './assets/fonts/iconfont.css'

1.  使用字体图标，例如：

<el-input prefix-icon="iconfont icon-user"></el-input>       // 用户头像
    <el-input prefix-icon="iconfont icon-3702mima"></el-input>   // 用户密码锁

### 防止暴力操作 `fastclick` 和 移动端调试神器 `vconsole` ###

`npm install fastclick -S`

// 在main.js文件中，引入下面代码
    
    import FastClick from 'fastclick'
    FastClick.attach(document.body);

移动端调试神器：`vconsole`

`npm install vconsole -S`

// 在main.js文件中，引入下面代码
    
    import Vconsole from 'vconsole';
    const vConsole = new Vconsole();
    Vue.use(vConsole)

### 页面数据汇总(上一步、下一步) ###

适用场景：通过上一步、下一步，逐步收集页面数据，然后在最后一步获取前面收集的页面数据

业务逻辑：

第一步：将页面数据保存在缓存中

*  第一个页面：`this.chooseDates` 表示：收集的页面数据

this.chooseDates.sex = '男'
    this.chooseDates.age = '18'
    
    localStorage.setItem("student", JSON.stringify(this.chooseDates));

第二步：在下一个页面获取缓存中的数据，将该页面的数据和缓存中的数据进行拼接，重新将数据保存在缓存中

*  第二个页面----最后一个页面：都是使用下面的代码。

`this.chooseDates` 表示：收集的页面数据

this.chooseDates.math = '良好'
    this.chooseDates.english = '优秀'
    
    
    // 第一步：先获取里面的数据--转换为对象形式。
    let date1 = JSON.parse(localStorage.getItem("student"));
    // 第二步：然后对象拼接--转换为字符串形式
    let dateList = JSON.stringify(Object.assign(date1, this.chooseDates));
    // 第三步：重新保存数据
    localStorage.setItem("student", dateList);

第三步：在需要的地方，获取缓存中的数据

// 获取localStorage里面的数据
     let dataList1 = JSON.parse(localStorage.getItem("student"));

### 3秒倒计时自动跳转指定页面 ###

data() { 
        return { 
          title: "支付结果",
          count: "" //倒计时
        };
      },
    created() { 
      this.threeGo();
    },
    methods: { 
        threeGo() { 
          const TIME_COUNT = 3;
          if (!this.timer) { 
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => { 
              if (this.count > 1 && this.count <= TIME_COUNT) { 
                this.count--;
              } else { 
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
                //跳转的页面写在此处
                
              }
            }, 1000);
          }
        }
    }

### 路由发生变化：修改页面标题 ###

在`router.js`文件中

{ 
         path: "/student",
         component: resolve => require(["./views/va/student.vue"], resolve),
         name: "student",
         meta: { 
             pageTitle: 'student页面'
         }
     }
    
    
    Route.beforeEach((to, from, next) => { 
    
      /* 路由发生变化修改页面title */
      document.title = to.meta.pageTitle
      
      next()
    })

### vue全局组件自动加载注册（重点） ###

[官方文档][Link 1]

在src / components / 新建global文件夹；`这个路径与components/index.js中的配置保存一致`

第一步：global / test.vue（测试使用）

第二步：在需要的页面以标签的形式使用即可。`<base-test></base-test>`

<template>
    <div class="create">
    this is a test
    </div>
    </template>
    
    <script>
    
    export default {
    // 必须有name属性
    name: 'baseTest',
    methods: {
    
    }
    }
    </script>
    
    <style>
    
    </style>

第三步：在components / 新建index.js

import Vue from 'vue'
    
    const requireComponent = require.context(
    './global',  // 全局组件自动加载注册：在components / 新建global文件夹（放置全局组件）
    true,  // 是否查询其子目录
    /\.vue$/  // 匹配基础组件文件名的正则表达式
    )
    
    requireComponent.keys().forEach(fileName => { 
    // 获取组件配置
    const componentConfig = requireComponent(fileName)
    
    
    // 全局注册组件
    Vue.component(
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default.name || componentConfig.name,
    componentConfig.default || componentConfig
    )
    })

第四步：在main.js中引入

// 引入全局组件自动加载注册
    import './components/index'

### 防止重复请求接口数据 ###

1.在data中定义：  			
    isscah: true	// 防止重复请求接口数据
    
    2.在事件处理函数中，点击事件
    
    clik() { 
    	
    	// 防止重复请求接口数据
    	if (!this.isscah) { 
    		return false
    	}
    	this.isscah = false	
    	
    	接口请求成功：  
    	that.isscah = true
    }

### vue路由懒加载常用的两种方式 ###

#### 方式一：vue异步组件实现懒加载 ####

方法如下：`component：resolve=>(require([‘需要加载的路由的地址’])，resolve)`

import Vue from 'vue'
    import Router from 'vue-router'
    
    /* 此处省去之前导入的HelloWorld模块 */
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'HelloWorld',
          component: resolve=>(require(["@/components/HelloWorld"],resolve))
        }
      ]
    })

#### 方式二：ES6 提出的import方法 ####

方法如下：`const HelloWorld = （）=>import(‘需要加载的模块地址’)`

import Vue from 'vue'
    import Router from 'vue-router'
    
    // 路由懒加载
    const HelloWorld = ()=>import("@/components/HelloWorld")
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'HelloWorld',
          component:HelloWorld
        }
      ]
    })

### router的meta实现前端页面级的访问控制 ###

[router-meta官方文档][router-meta]

第一步：哪个页面路径需要设置访问控制，在`router.js`中添加meta属性

const routes =[
     {  
         path: 'create', 
         name: 'movie-create', 
         alias: 'edit',
         component: () => import('../views/movie/create.vue'), 
         meta: {  requiresAuth: true } 
     }
    ]

第二步：在router.js中

// 第一步：引入store
    import store from '../store/index'
    
    import {  Notification } from 'element-ui';
    
    // 路由导航守卫
    router.beforeEach((to, from, next) => { 
    // 判断是否有访问控制标识 meta
    if (to.matched.some(record => record.meta.requiresAuth)) { 
        // 判断是否登录（需要提前在store.js中，设置登录状态 isUserLogin）
     if (store.state.isUserLogin) { 
       next()
     } else { 
       // 友好提示
       Notification({ 
         title: '提示',
         type: 'warning',
         message: '请登录后再访问该页面'
       });
       next({ 
         path: '/login',
         query: {  redirect: to.fullPath }
       })
     }
    } else { 
     next() // 确保一定要调用 next()
    }
    })

### 请求进度条效果 ###

安装依赖包：`cnpm i nprogress -S`

在main.js中：导入`Nprogress`包对应的js 和 css

import Nprogress from 'nprogress' 	js实现进度条效果
    import 'nprogress/nprogress.css'  	css美化进度条

*  在request拦截器中，展示进度条 `Nprogress.start()`

*  在response拦截器中，隐藏进度条`Nprogress.done()`

axios.interceptors.request.use(config=>{ Nprogress.start()})   展示进度条
    
    axios.interceptors.response.use(config=>{ Nprogress.done()})   隐藏进度条

### 当接口图片无法显示，使用本地默认图片 ###

#### 方法一：使用require方法 ####

[参考链接][Link 2] 亲测没有效果（`方法暂时保留`）

<img v-bind:src="userData.photo" :οnerrοr="logo" class="img-box4">
    
    ******************************
    
    data: () => ({
        logo: 'this.src="' + require('../assets/img.png') + '"'
    })

#### 方法二：使用onerror事件（亲测有效） ####

[参考链接][Link 3]

<div class="article_item_img">
       <img :src="item.cover" @error="defImg()" alt="img" />
      </div>
    
    ****************  data中定义变量
    
    defaultImg: require("./img/defPic.png");  
    
    ***************  methods定义方法：
    
     defImg(){
    	 let img = event.srcElement;
    	 img.src = this.defaultImg;
    	 img.onerror = null; //防止闪图
     }

### 点击图片旋转：换一批 ###

// 旋转 data中定义 deg: 0
        rotate () { 
          this.deg += 90;
          if (this.deg >= 360) { 
            this.deg = 0
          }
        },

### 动态渲染本地图片img ###

array: [
            { 
              id: 0,
              name: '小明',
              job: '学生',
              address: '北京市中心',
              year: '居住10年',
              img: 'xm.png'
            }
          ]

[1]: https://www.cnblogs.com/jin-zhe/p/9985436.html
[2]: https://blog.csdn.net/gaoxin666/article/details/96143571
[Link 1]: https://cn.vuejs.org/v2/guide/components-registration.html#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%8A%A8%E5%8C%96%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C
[router-meta]: https://router.vuejs.org/zh/guide/advanced/meta.html#%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF
[Link 2]: https://blog.csdn.net/qq_32786873/article/details/70161342
[Link 3]: https://blog.csdn.net/qq_39882537/article/details/90318296