用 Vue CLI 3，可以快速的建立一個 Vue 專案。雖說是方便，但要能夠規模化的管理 vuex, scss, vue-router 等等檔案，還是要自己手動新增 / 刪除一些東西。這邊筆記下自己最新整理出的架構規劃。
事前準備
1. 安裝好 Node.js ，畢竟這 Vue CLI 套件工具是建立在 Node.js 上的
2. 確認是否安裝成功，可以用 vue –version 來確認
基本選項安裝
這回的專案會用到 vuex, vue-router, SCSS, Linter / Formatter。這些可以在 create 專案時，一併下載併安裝完畢。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
# default 包含基本的 Babel + ESLint。選擇 Manually 來加上其他功能 ? Please pick a preset: default (babel, eslint) ❯ Manually select features # 選取要安裝的特性 ? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ❯◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing # Vue Router 的 mode，這邊選 No，改使用 hash mode ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/N) N # CSS 預處理器選擇，這邊選擇第二個 node-sass，才能編譯 sxss 檔案 ? Pick a CSS pre-processor Sass/SCSS (with dart-sass) ❯ Sass/SCSS (with node-sass) Less Stylus # ESLint 安裝，我是選用 "ESLint + Prettier" ? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ❯ ESLint + Prettier # 代碼檢查時機，在存檔時檢查。 ? Pick additional lint features ❯◉ Lint on save ◯ Lint and fix on commit (requires Git) # 在哪為特性進行配置？我是選擇放在 package.json 內，這樣比較好修改 ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) In dedicated config files ❯ In package.json |
專案結構
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
client/ ├── node_modules/ # 依賴的模組 │ ├── public/ # 公共資源檔案，不做任何編譯壓縮處理，使用絕對路徑指定檔案 │ │ │ ├── favicon.ico # icon 圖片 │ └── index.html # 網站入口 html，若有要從外部引入 CSS Reset，直接放在這邊 │ ├── src/ # Vue 與前端的原始檔案 │ │ │ ├── assets/ # 公共資源檔案，這邊的檔案會經由 webpack 構建處理，可使用相對路徑指定檔案 │ ├── components/ # Vue 公共組件 │ ├── views/ # Vue Router 頁面組件 │ ├── styles/ # 頁面 CSS 設定檔 │ ├── utils/ # 共用程式碼，像是 mixins, apis ...... │ ├── App.vue # 項目入口 │ ├── main.js # 項目的核心 │ ├── router.js # 路由設定 │ └── store.js # Vuex 狀態管理 │ └── package.json #記載整個項目的解釋說明文件，包含 "eslintConfig" │ └── .gitignore #排除要上傳到遠端的檔案 │ └── package-lock.json # 記載整個項目所用到的套件相依性 │ └── babel.config.js # babel 編譯檔設定文件 │ └── README.md # 專案說明文件 │ └── vue.config.js # 若你想要改變 Vue CLI 的預設設定，那需要自行加上這個檔 |
一些細部檔案設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
// Vue.config.js const path = require("path"); module.exports = { outputDir: path.resolve(__dirname, "../server/public"), // 更改 npm run build 的輸出路徑 devServer: { open: true, // 開發時，若有 hot-loader 會自己刷新頁面(需搭配下方的 host) host: "localhost" } }; // package.json 的 eslintConfig 的 rules，記得加上 "no-console": "off" // 若有出現一些排版問題，可以用 npm run lint 來自動修正 "eslintConfig": { ...... "rules": { "no-console":"off" } } /* /store/index.js */ import moduleName from "./modules/moduleName"; export default new Vuex.Store({ modules: { moduleName } }); /* /store/modules/moduleName.js*/ /* 到時可以模組化的取用 vuex 的值*/ const data = { namespaced: true, state: { }, getters: { }, mutations: { }, actions: { } }; export default data; // axios 模組化管理 /* /utils/apis.js */ import axios from "axios"; const baseURL = "https://demo.com/api/json/v1/1"; const onlineDbRequest = axios.create({ baseURL }); export const yourAPIs = { getData: data => { return onlineDbRequest.get(`/search.php`, data); } }; // 用 vue-router 來修改 <body> 樣式，像是全部頁面的背景顏色 router.afterEach(() => { document .querySelector("body") .setAttribute("style", "background-color: #2F0900"); }); |
參考資料
1. Vue CLI 3 安裝與使用教學
2. Vue cli 3 hot reload suddenly not working in browsers
