vue項目開發基本目錄結構

§ 目錄結構

.
├── build/               # Webpack 配置目錄
├── dist/                # build 生成的生產環境下的項目
├── src/                 # 源碼目錄（開發都在這里進行）
│   ├── assets/            # 放置需要經由 Webpack 處理的靜態文件
│   ├── components/        # 組件
│   ├── filters/           # 過濾器
│   ├── store/    　　　　 # 狀態管理
│   ├── routes/            # 路由
│   ├── services/          # 服務（統一管理 XHR 請求）
│   ├── utils/             # 工具類
│   ├── views/             # 路由頁面組件
│   ├── app.js             # 啟動文件
│   ├── index.html         # 靜態基頁
├── static/              # 放置無需經由 Webpack 處理的靜態文件
├── .babelrc             # Babel 轉碼配置
├── .eslintignore        # （配置）ESLint 檢查中需忽略的文件（夾）
├── .eslintrc            # ESLint 配置
├── .gitignore           # （配置）需被 Git 忽略的文件（夾）
├── package.json         # （這個就不用多解釋了吧）

├── package-lock.json    # （以記錄當前狀態下實際安裝的各個npm package的具體來源和版本號)

您可以根據業務需求改動目錄結構

 

上述目錄結構中，需要注意的是 src/components/ 與 src/views/ 的區別

src/components/                    # 組件
    ├── App.vue                      # 根組件
    ├── Breadcrumb.vue               # 面包屑
    ├── Navbar.vue                   # 頂部導航欄
    ├── Pagination.vue               # 分頁
    ├── Select/                      # 下拉框選擇框組件
    │   ├── LimitSelect.vue            # “每頁顯示多少條記錄” 下拉選擇框
    │   └── Select2.vue                # 對 Select2 的封裝
    └── Sidebar/                     # 側邊欄組件
        ├── index.vue                  # 側邊欄
        └── Link.vue                   # 導航鏈接封裝

src/views/                         # 路由頁面組件
    ├── index.vue                    # 首頁
    ├── auth/                        # 用戶認證模塊
    │   ├── login.vue                  # 登錄頁
    │   └── logout.vue                 # 注銷登錄頁
    └── msg/                         # 留言板模塊
        ├── index.vue                  # 對應 /msg（留言板首頁，alias => /msg/list）
        ├── list.vue                   # 對應 /msg/list（留言板列表）
        ├── add.vue                    # 對應 /msg/add（新增留言）
        ├── detail.vue                 # 對應 /msg/detail/:msgId（查看留言）
        ├── update.vue                 # 對應 /msg/update/:msgId（修改留言）
        ├── _components/               # 留言板模塊共用組件
        │   ├── AuthorSelect.vue         # 留言發布者選擇下拉框
        │   ├── MsgForm.vue              # 留言表單
        │   └── OptBtnGroup.vue          # 留言操作按鈕組
        └── _mixins/                   # 留言板模塊共用 mixins
            └── autoLoadByParams.js      # 根據 $route.params.msgId 自動加載

根據注釋，我們大概知道了二者的差別：

src/components/

• 主要是全局性的，或通用性很強的組件，具備良好的封裝性
• 一般不會涉及到具體的業務邏輯

src/views/

• 主要是業務性的頁面組件，基本不具備通用性
• 基本與路由一一對應（例如 /src/views/auth/login.vue 對應着路由 /auth/login）
• 各功能模塊（如 msg/）內部可分離出通用部分（如 _components/、_mixins/）

若多個功能模塊通用的，則建議移到全局，即 src/components/、src/mixins/ 等