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

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

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

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

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

 

一、安裝vue cli

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

打開終端機，輸入：

$ yarn global add @vue/cli
$ vue -V //檢查是否有安裝到vue-cli

預期結果終端機會出現：

@vue/cli 4.5.6

---

二、使用cli建立專案

在這邊只要先移動到你平常放專案的那層資料夾，不用先創建專案資料夾，因為vue create指令會直接在所在位置創建一個你輸入的名稱的資料夾。

$ cd playground  //移動到平常放專案的地方
$ vue create my-project //my-project是自己取的專案名稱

這時候會出現一連串的選項要你選擇：

1. Please pick a preset : Manually select features 選擇手動
2. Check the features needed for your project : 選起以下這些 ( 上下鍵移動、空白鍵選取、enter確認）
   • Choose Vue version （vue3出來了，所以他現在可以讓你選）
   • Babel
   • Router
   • Vuex
   • CSS Pre-processors （你要用sass就要選起來）
   • Linter / Formatter （多人協作的話，最好是選起來，統一大家程式碼）
3. Choose a version of Vue.js that you want to start the project with : 2.x （因為vue3還沒學，所以先選 2.x XDD）
4. Use history mode for router? : Y （看你網頁的路徑要不要顯示#）
5. Pick a CSS pre-processor : Sass/SCSS (with node-sass)
6. Pick a linter / formatter config : ESLint + Prettier （通常是檢查跟排版都開）
7. Pick additional lint features : Lint on save （儲存的時候就自動檢查，超方便）
8. Where do you prefer placing config for Babel, ESLint, etc.? : In dedicated config files （全部都獨立的設定檔比較好管理）
9. Save this as a preset for future projects? (y/N) N （你覺得你日後懶得每次建專案都這樣選，你就可以把這次的設定存起來，選y ）

三、設定prettier

如果很多人一起合作一個專案，每個人的設定都不同，萬一某一天你只是要修改別人的一行程式，但是會因為你的排版設定跟他不同，你的編輯器又會自動把整個檔案重新排版，你就會發現git修改記錄變得非常多，而且都只是排版的調整，日後再看這條commit，就會很難發現你真正修改的邏輯是在哪裡。

1. 根目錄新增檔案.prettierrc.js
2. 內容可以依照自己的喜好輸入：

module.exports = {
  semi: true,
  singleQuote: false,
  arrowParens: "avoid",
  trailingComma: "none"
};

終端機輸入指令，把全部檔案依照你的設定跑一遍 :

$ prettier --write .

注意，最後面有一個.，表示執行現在所在位置的資料夾。
如果他找不到指令，請先全域安裝prettier

$ yarn global add prettier

---

四、自動化排序.vue 檔內的Component/instance順序

就是你在撰寫.vue 檔案的時候，data、computed、methods…那些的順序，不管是不是多人協作，都建議要統一。

vue官網有推薦的順序，參考這裡

1. 設定.eslintrc.js

extends: [
	"plugin:vue/recommended" //把plugin:vue的改成recommended
]

2. 要在儲存的時候自動format，在vscode 的settings.json 中：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},

---

五、axios設定

如果你的網站會需要跟後端溝通走http協定，vue2.0以後都是推薦使用axios套件，所以就把它裝起來吧！

1. 安裝axios

$ yarn add axios

2. 新增api.js檔案（可以建立一個utils資料夾，裡面放各種工具js檔）

import axios from "axios";

axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    config = {
      ...config,
      baseURL: "http://localhost:3000",
      headers: { "Access-Control-Allow-Origin": "*" }
    };
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

export const Ajax = config => {
  return axios(config);
};

其中的baseURL 可以設定在環境變數，依照不同環境切換domain。

3. 在頁面中使用：

import { Ajax } from '@/utils/api';
<script>
export default {
  //...
  async created() {
    const { data } = await Ajax({ url: "posts", method: "get" });
    console.log(data);
  }
}
</script>

---

六、設定環境變數

通常在開發一個專案，會有工程師使用的development開發環境、test/sit測試環境、production正式(打包)上線環境，這三種環境可能在某些設定上會不一樣，這時候可以利用環境變數把三個環境不同的參數設定在各自檔案中去切換。

在根目錄中新增環境變數檔案，通常有以下兩種：

1. .env.development
2. .env.production

VUE_APP_API_URL="http://localhost:8080"

在頁面中使用：

console.log(process.env.VUE_APP_API_URL);

詳細用法參考官網