在vue cli3 專案中使用lodash

, 
import _ from "lodash";

先在會使用到的組件內引入lodash

methods: {
    func(){
        let lodashFunc = _.debounce(this.innerFunc(),1000);
   
        lodashFunc();
    },
    
    innerFunc(){
        console.log('dddd);
    }
}
1+
/0 評論/通過：

vue cli 3 設定檔 vue.config.js

,

使用 vue cli 3 指令 yarn 新建專案，vue官網建議使用vue.config.js檔案覆蓋webpack.config.js

module.exports = {
  devServer: {
    port: 6800,
    open: true
  },
  publicPath: 
    process.env.NODE_ENV === "production" ? "/vue-spotify" : "/",
  configureWebpack: {
    resolve: {
      alias: {
        "@C": "@/components",
        "@L": "@/layout",
        "@V": "@/views",
        "@SCSS": "@/scss",
        "@U": "@/utils",
        "@A": "@/assets"
      }
    }
  },
  css: {
    loaderOptions: {
      scss: {
        data: `
                @import "@SCSS/utils/_variables.scss";
                @import "@SCSS/utils/_mixins.scss";
              `
      }
    }
  }
};
2+
/0 評論/通過：

線條背景

,

用漸層的方式繪製重複排列的線條背景

background: repeating-linear-gradient(
    45deg,
    rgba($color-white, 0) 25%,
    rgba($color-white, 0) 60%,
    #fff 75%,
    rgba($color-white, 0) 0
);
background-color: rgba($color-white, 0.3);
background-size: 12px 12px;
1+
/0 評論/通過：

裁切照片

,

不用放背景圖，直接針對<img />裁切圖片

img{
   width: 100%;
   height: 66rem;
   object-fit: cover;
   object-position: 50% 50%;
}
0
/0 評論/通過：

多邊形

,

單純用css改變element形狀，支援多邊形、內凹

-webkit-clip-path:polygon(10% 100% ,0 100%,0 0, 100% 0%, 100% 10%, 10% 10%);
閱讀更多
0
/0 評論/通過：

自適應計算n欄的寬度

,

網頁想要排版成n欄一排

<div class="grid">
  <div class="grid__item"></div>
</div>
.grid {
  display: flex;
  flex-wrap: wrap;
    &__item {
      margin-bottom: $gutter;
      width: calc((100% - 2 * #{$gutter}) / 3);
      &:not(:nth-child(3n)) {
        margin-right: $gutter;
      }
  }
}
0
/0 評論/通過：

windows跑deploy.sh出現 $’\r’: command not found

,

事情是這樣的，自從到新公司被配了windows電腦，就開啟了我人生很多的體悟，原來有mac用是這麼的幸福，人生真的不要失去了才懂得珍惜欸！今天IT終於幫我開好gitlab倉庫，我就想說來寫一下自動化部屬，先把deploy.sh的部分完成，寫好後在script那邊加了sh deploy.sh，不出我所料windows總是能很有存在感的在各種小事上跟mac不同＠＠

總之，網路上查了很多說明，因為作業系統編碼不同，有些人說要vim進去看啊、下指令format啊…之類的。但是現在大部分人的電腦都是win10了，直接電腦內建就有可用工具，不用安裝其他套件或是下指令。

步驟 ：

  • windows進入設定 –> 更新與安全性 –> 開發人員專用 –> 選擇【開發人員模式】。
  • windows搜尋bash會跑出Git Bash程式，用Git Bash跑指令(不要用windowsPowerShell)，成功。

0
/0 評論/通過：

在vue專案中讀取package.json資料

,

先在vue.config.js中加入plugin定義

module.exports = { 
  chainWebpack: config => {
    config.plugin("define").tap(definitions => {
      definitions[0]["process.env"]["PACKAGE_VERSION"] = JSON.stringify(
        require("./package.json").version,
      );
      return definitions;
    });
  },
};

讀取

let version = process.env.PACKAGE_VERSION;
1+
/0 評論/通過：

在vue中使用setTimeout與setInterval

,

在vue中啟用、清除timeout的寫法不同，如果clearInterval沒有加上window，就不會停止。

setTimeout可以直接使用：

this.timeout = setTimeout(() => {
    console.log('一小時後要做的事');
}, 1000 * 60 * 60);
clearTimeout(this.timeout);
閱讀更多
1+
/0 評論/通過：

React Native 使用 alias，不用寫很多相對路徑。

,

在React Native 版本0.61.5 ，使用 npx react-native init 建立的專案，自動會幫你安裝 metro-react-native-babel-preset ，並且產生 babel.config.js 這隻檔案
所以只需額外安裝 babel-plugin-module-resolver

$ yarn add babel-plugin-module-resolver -D
閱讀更多
0
/0 評論/通過：