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" : "/"…

在vue cli3 專案中使用lodash

import _ from "lodash";

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

methods: {

    func(){

        let lodashFunc = _.debounce(this.innerFunc(),1000);
   
        lodashFunc();

監聽手機瀏覽器開發環境

使用電腦瀏覽器查看手機網頁element、console…等

能在本地電腦使用 devtools 除錯 ios/android 各種瀏覽器開啟的網頁

weinre

安裝：npm install -g weinre

測試：weinre

顯示如下即表示安裝成功：

2019-07-12T05:29:54…

線條背景

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

background: repeating-linear-gradient(

    45deg,

    rgba($color-white, 0) 25%,

    rgba($color-white, 0) 60%,

    #fff 75%,

…

多邊形

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

-webkit-clip-path:polygon(10% 100% ,0 100%,0 0, 100% 0%, 100% 10%, 10% 10%);

自適應計算n欄的寬度

網頁想要排版成n欄一排

<div class="grid">
  <div class="grid__item"></div>
</div>

.grid {

  display: flex;

  flex-wrap: wrap;

    &__item {

      margin-bottom…

裁切照片

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

img{

   width: 100%;

   height: 66rem;

   object-fit: cover;

   object-position: 50% 50%;

}