问题杂记（二）

隐藏滚动条且保持滚动效果

.outer-container {
    overflow: hidden;        // 隐藏滚动条
    width: 240px;          // 内容宽度，同时配合子元素
    height: 100%;
  }
  .inner-container {
    overflow-x: hidden; // 隐藏水平滚动条
    overflow-y: scroll;    // 产生垂直滚动
    width: 257px;       // 比父元素宽出滚动条的宽度 17px
    height: 100%;          // 设置产生滚动条
  }
  .inner-container::-webkit-scrollbar {
    display: none;            //  webkit 内核的浏览器仅需设置此属性
  }

// 另外一种方法,在滚动的容器设置
.inner-container {
    margin-right: -17px;
}

error: pathspec 'field'' did not match any file(s) known to git.

// 须要在提交时将描述信息放在两重引号中，缘由疑是 git 没法识别 文件名或路径
git add .
git commit -m "'your message'"
git pull origin master
git push origin master

检查是否登陆后跳转，防止进入死循环

router.beforeEach((to, from, next) => {
    out //判断登陆状态简单实例
    var userInfo = window.localStorage.getItem('token');
    if (userInfo) {
        next();
    } else {
        next('/login');
    }
})

// 以上会发现出现以下错误：出现 dead loop错误,解决方法以下所示
// 解决思路：排除此时地址 = 转向的地址 的状况，避免dead loop
router.beforeEach((to, from, next) => {
    var userInfo = window.localStorage.getItem('token');//获取浏览器缓存的用户信息
    if(userInfo){ //若是有就直接到首页咯
        next();
    } else {
        if(to.path=='/login'){ //若是是登陆页面路径，就直接next()
            next();
        } else { //否则就跳转到登陆；
            next('/login');
        }

    }
})

BrowserslistError: Unknown browser major

在 webpack 中引入使用 bootstrap 引用 bootstrap.min.js 正常 引用 bootstrap.min.css 报错

ERROR in ./node_modules/css-loader?minimize!./node_modules/autoprefixer-loader!./node_modules/bootstrap/dist/css/bootstrap.min.css
    Module build failed: BrowserslistError: Unknown browser major
        at error (E:\project\node_modules\browserslist\index.js:37:11)
        at Function.browserslist.checkName (E:\project\node_modules\browserslist\index.js:320:18)
        at Function.select (E:\project\node_modules\browserslist\index.js:438:37)
        at E:\project\node_modules\browserslist\index.js:207:41
        at Array.forEach (<anonymous>)
        at browserslist (E:\project\node_modules\browserslist\index.js:196:13)
        at Browsers.parse (E:\project\node_modules\autoprefixer\lib\browsers.js:44:14)
        at new Browsers (E:\project\node_modules\autoprefixer\lib\browsers.js:39:28)
        at loadPrefixes (E:\project\node_modules\autoprefixer\lib\autoprefixer.js:56:18)
        at plugin (E:\project\node_modules\autoprefixer\lib\autoprefixer.js:62:18)
        at LazyResult.run (E:\project\node_modules\postcss\lib\lazy-result.js:274:20)
        at LazyResult.sync (E:\project\node_modules\postcss\lib\lazy-result.js:261:32)
        at LazyResult.stringify (E:\project\node_modules\postcss\lib\lazy-result.js:285:14)
        at LazyResult.get (E:\project\node_modules\postcss\lib\lazy-result.js:334:25)
        at Object.module.exports (E:\project\node_modules\autoprefixer-loader\index.js:55:35)

解决方法：

// Edit node_modules\bootstrap\package.json: Remove these lines:

"last 1 major version",
">= 1%",

webpack-vue 使用font-awesome

npm 安装font-awesome 以及须要的全部依赖

npm install less less-loader css-loader style-loader file-loader font-awesome --save

在入口文件中全局注册font-awesome

import 'font-awesome/css/font-awesome.min.css';

配置解析

{
    test: /\.(gif|jpg|jpeg|png|woff|svg|eot|ttf)\??.*$/,
    loader: 'url-loader?limit=1024'
},

iview导航栏组件，选中当前页面以后，点刷新或点击浏览器后退按钮后，导航栏选中的就消失了

在vuex的 state 存储 active-name，根据路由用 computed 取出 active-name