1.使用scss替换css报错冲突

npm uninstall sass-loader node-sass  写在sass和node-sass  不要安装node-sass
npm install sass-loader@8.0.2 sass@1.26.5  --save-dev     安装指定版本的sass

2. foreach中return 原数组 循环中使用递归 会导致超出最大调用栈

const routes = [
  // 主页面路由表
  {
    path: "/",
    name: "home",
    component: () => "Home",
    // 主页面子路由
    children: [
      {
        path: "/main",
        name: "main",
        component: () => "Main",
      },
    ],
  },
  {
    path: "/login",
    name: "login",
    component: () => "Login",
  },
  //   全局404页面
  {
    path: "*",
    name: "404",
    component: () => "About",
  },
];

const createRoutes = function (arr) {
  arr.forEach((item) => {
    if (item.component && typeof item.component === "function") {
      let createComponent = () => import(`../../${item.component()}/index.vue`);
      item.component = createComponent;
      if (item.children && item.children.length > 0) {
        createRoutes(item.children);
      }
    }
  });
    // 遍历中不能写return 原数组 否则会超出最大调用栈
    // return arr    
};

const getRoutes = function (arr) {
  return createRoutes(arr);
};
export default getRoutes(routes);

3.封装组件点击事件不生效 需要添加 @click.native进行操作

4.表单校验需要将所有校验条件全部判断 否则不会触发校验

5.滚动条样式不要设置高度 只定义滑块高度就行

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 8px;
  height: 0px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
  border-radius: 10px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  width: 0px;
  height: 70px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #d6d30f !important;
}

6.vue中标签id名称不能和组件或者页面路由名称相同 否则会报冲突

7.封装的组件可以在util文件中导入 直接导入element 不添加。。/ 然后进行导出 在其他地方引入

8.关于vue中install的使用

1.vue.use如果传入的是一个对象，则执行其install方法， 如果传入的时一个函数 则执行函数自身

2. 如果组件没有被注册过 则注册成功之后会给插件添加一个installed属性 其值为true vue.use内部会检测插件的installed属性 避免重复注册

import sLoading from './s-loading'
export default {
  install(Vue, options) {
    // Vue  接受参数vue实例对象
    // options  接受传入参数 配置项
    // 一 创建一个子类 参数是包含组件选项的对象
    const loading = Vue.extend(sLoading)
    // 创建一个loading实例对象
    const profail = new loading({ el: document.createElement('div') })
    // 将对象的dom挂载到body上
    //-----------------//
   # 注意此处不能是通过app id 进行append    
    document.body.appendChild（profail。$el）
  #error  document.getElementById('app').appendChild(profail.$el)
    // 插件接收值  options
    if (options) {
      // 在vue.use时判断参数 如果use时传入了参数 就jin行更改类型
      // 1.更改icon图标
      if (options.icon) {
        profail.icon = options.icon
      }
      // 更改字体颜色
      if (options.color) {
        profail.color = options.color
      }
      // 如需进行后续操作 可将其进行设置传入更多参数。。。。。。。。。。
    }
    const open = function (param) {
      if (param) {
        profail.show = true
      }
    }
    const closed = function (param) {
      if (param) {
        profail.show = false
      }
    }
    const profailMethod = {
      open,
      closed,
    }
    Vue.$sLoding = profailMethod
  },
}

9.tree结构转换

/**
 * 数组转树形结构,时间复杂度O(n)
 * @param list 数组
 * @param idKey 元素id键
 * @param parIdKey 元素父id键
 * @param parId 第一级根节点的父id值
 * @return {[]}
 */
function listToTree (list,idKey,parIdKey,parId) {
    let map = {};
    let result = [];
    let len = list.length;

    // 构建map
    for (let i = 0; i < len; i++) {
        //将数组中数据转为键值对结构 (这里的数组和obj会相互引用，这是算法实现的重点)
        map[list[i][idKey]] = list[i];
    }

    // 构建树形数组
    for(let i=0; i < len; i++) {
        let itemParId = list[i][parIdKey];
        // *节点
        if(itemParId === parId) {
            result.push(list[i]);
            continue;
        }
        // 孤儿节点，舍弃(不存在其父节点)
        if(!map[itemParId]){
            continue;
        }
        // 将当前节点插入到父节点的children中（由于是引用数据类型，obj中对于节点变化，result中对应节点会跟着变化）
        if(map[itemParId].children) {
            map[itemParId].children.push(list[i]);
        } else {
            map[itemParId].children = [list[i]];
        }
    }
    return result;
}

10.注册组件

// 引入组件
import LoadingComponent from './loading.vue'
// 定义 Loading 对象
const Loading={
    // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
    install:function(Vue){
        Vue.component('Loading',LoadingComponent)
    }
}
// 导出
export default Loading
#备注:  如果需要挂载组件 挂载方法  也可用这种方式

11.git初始配置

   # 关联远程仓库地址
git remote add origin https://github.com/wangwanqi999/bookadmin.git
   # 设置远程仓库并推送demo-ui 分支
 git push --set-upstream origin demo-ui 

12.npm组件库发包过程

#1初始化包
npm init
#2登录npm
npm login
#3发布包
npm publish
###########发包过程注意
将项目的src根目录下创建一个index文件夹  
将封装的组件方法 导出 
更改pagejson上的私有变成共有   
每次发包都改下版本号
导入名称为默认发包名称
#发包过程中淘宝镜像没有权限  更改为初始源  或者无法发布私有包  或者包名重复
npm config set registry http://registry.npmjs.org

13.vue中$attr的有关说明

使用场景:

a组件: 父组件

b组件:子组件

c组件:孙组件

#当a组件向子组件传递了   如data属性, 但是b组件不需要用到 但是b组件中的c组件需要使用a组件传递过来的值,  这时需要在b组件中获取a子组件传递过来的data  , 在传递给c组件,  这时不需要使用props  直接使用v-bind=‘$attr’

14.关于动态权限路由的思路

步骤一: 需要有一个白名单的路由: .

1.  404页面路由
2.  home主页面路由
3.  login登录页面路由

步骤二:需要动态加载权限 将获取的后台接口路由配置到home路由的children下面

步骤三:导出路由表