終端機啟動專案後自動開啟視窗

在使用cli3 搭配 yarn serve 時,自動打開該 port 號的視窗。

方法一:

package.json檔案中設定

閱讀更多
0

vue專案使用github線上預覽

當你在公司與 IT 人員合作,你只需把製作好的靜態檔案交給 IT 人員,他們會幫你部署到雲端空間,可是如果你只是在家裡自己想展示一件作品在線上環境,那可以使用 github pages 完成簡單的部署。
像是: 範例網站

1.vue router.js請使用hash mode,不要使用history

閱讀更多
0

在vue cli3 專案中使用lodash

import _ from "lodash";

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

methods: {
    func(){
        let lodashFunc = _.debounce(this.innerFunc(),1000);
   
        lodashFunc();
    },
    
    innerFunc(){
        console.log('dddd);
    }
}
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";
              `
      }
    }
  }
};
0

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

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

var webpack = require("webpack");
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                "process.env": {
                    PACKAGE_JSON: '"' + escape(JSON.stringify(require("./package.json"))) + '"'
                }
            })
        ]
    }
}

讀取

let version = JSON.parse(unescape(process.env.PACKAGE_JSON)).version
0

在vue中使用setTimeout與setInterval

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

setTimeout可以直接使用:

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