問題雜記（二）

隱藏滾動條且保持滾動效果

.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