因為常常需要開始新專案,都要重新設定,所以這幾天找時間把一個初始專案的template架起來,可以從github上參考。

這邊使用的是vue 2 + vue cli 4

如果你想看vue3的建立新專案方法,請參考下面這篇文章:

 

一、安裝vue cli

要快速建立一個專案,一定要知道cli,它可以自動幫你架構好一種通用的架構,並且在建立的時候就可以選擇一般大眾常用的套件,像是sassaxiosunitestrouter…之類的。安裝方式可以參考官網

閱讀更多
0

使用 nuxt 無非就是為了 ssr,但是在部署 nuxt 的時候,他是需要 server 跑起來才有辦法做到 ssr,不像一般 spa 只需要部署靜態網站,所以最簡單的方法就是使用 docker 打包。

閱讀更多
0

最近終於要從後台系統脫離,前台網站因為是不用登入就可以看到,所以 SEO 是少不了的,這樣以 SPA 方式去開發一定會GG,因為所有內容都由 JS 產生,非原本的 HTML,這時候就需要 SSR 技術,預先 rendern 好 HTML 給搜尋引擎去找,而 nuxt.js 就是在 vue 的架構上去實踐 SSR

閱讀更多
1+

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

方法一:

package.json檔案中設定

閱讀更多
1+

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

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

閱讀更多
1+
import _ from "lodash";

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

methods: {
    func(){
        let lodashFunc = _.debounce(this.innerFunc(),1000);
   
        lodashFunc();
    },
    
    innerFunc(){
        console.log('dddd);
    }
}
1+

使用 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+

先在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+

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

setTimeout可以直接使用:

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