如何建立一個vue新專案與設定

,

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

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

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

如何建立一個vue新專案與設定

 

一、安裝vue cli

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

閱讀更多
0
/0 評論/通過：

使用Docker 打包 Nuxt.js

,

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

閱讀更多
0
/0 評論/通過：

從零開始建立一個nuxt.js專案

,

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

閱讀更多
1+
/0 評論/通過：

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

,

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

方法一：

在package.json檔案中設定

閱讀更多
1+
/0 評論/通過：

vue專案使用github線上預覽

,

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

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

閱讀更多
1+
/0 評論/通過：

在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 評論/通過：

在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 評論/通過：