深入理解 Vue 目錄結構

Vue 是一款由 Evan You 開發的流行 JavaScript 框架。Vue 具有響應式視圖和組件化的思想，讓開發者可以輕鬆構建交互式的 Web 應用。那麼在 Vue 開發中，目錄結構是很重要的，它可以讓我們更好的組織代碼，提高代碼的可讀性和維護性。在本文中，我們將會深入理解 Vue 目錄結構，包括各個文件夾的作用、命名規範和最佳實踐。

一、src 文件夾

src 文件夾是我們創建 Vue 項目時的默認文件夾，它包含了我們的應用程序的主要代碼和資源。通常情況下，我們需要將所有 Vue 組件、js 文件、css 文件和圖片等靜態資源放在這個文件夾下。

1、assets 文件夾

assets 文件夾存放的是靜態資源，如圖片、字體文件和全局 CSS 文件。這些資源可以在整個應用程序中共享。通常情況下，我們把所有的 CSS 樣式文件放在一個名為 style.css 的文件中，並在 index.html 文件中引用。

  <link rel="stylesheet" href="./assets/style.css">

2、components 文件夾

components 文件夾存放的是所有 Vue 組件。通常情況下，每一個組件都會有一個文件夾來存放它的子組件、樣式和模板。

  ├── components
  │   ├── App.vue
  │   ├── Button.vue
  │   ├── Dialog.vue
  │   ├── Modal.vue

在組件的命名中，可以參考以下命名規範：

• 每個組件都應該放置在單獨的文件夾中，命名應該為小寫字母和連字符的組合，例如 dialog-box。
• 組件的文件名應該為駝峰式，例如 DialogBox.vue。

3、plugins 文件夾

plugins 文件夾中包含了所有的自定義插件，例如 Vue Router 或 Vuex。當我們需要使用這些插件時，可以在 main.js 文件中引入它們。

  import router from './plugins/router';
  import store from './plugins/store';

  Vue.use(router);
  Vue.use(store);

4、router 文件夾

在 router 文件夾中，我們通常會創建一個 index.js 文件，來配置 Vue Router。在這個文件夾下，還可以包含若干個模塊，每個模塊負責管理一個子路由。

  import Vue from 'vue';
  import Router from 'vue-router';
  import Home from '@/views/Home';

  Vue.use(Router);

  export default new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'home',
        component: Home
      }
    ]
  });

5、store 文件夾

store 文件夾用於管理 Vuex 應用程序狀態。同樣地，我們通常會在這個文件夾下創建一個 index.js 文件，並在這個文件中配置 Vuex。

  import Vue from 'vue';
  import Vuex from 'vuex';

  Vue.use(Vuex);

  export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {}
  });

二、public 文件夾

public 文件夾是存放公共靜態資源的地方，這些資源不會被 webpack 編譯，但會被複制到打包後的目錄。當我們需要引用一些不需要編譯的資源文件時，可以將它們放在 public 文件夾中。

  <img src="%PUBLIC_URL%/logo.png" alt="logo">

三、tests 文件夾

tests 文件夾用於存放所有的單元測試和端到端測試代碼。在進行開發時，測試是非常重要的，我們應該經常運行它們以確保代碼的質量。

  import { mount } from '@vue/test-utils';
  import Button from '@/components/Button';

  describe('Button.vue', () => {
    it('renders a Button', () => {
      const wrapper = mount(Button);
      expect(wrapper.find('button').exists()).toBe(true);
    });
  });

總結

在 Vue 目錄結構中，每個文件夾都有其特定的作用。了解各個文件夾的職責，可以讓我們更好地組織代碼，從而提高代碼的可讀性和維護性。在構建一個大型的 Vue 應用程序時，清晰的目錄結構可以幫助我們更好地管理代碼，並且使代碼的擴展和維護更加容易。