從零開始Vue項目實戰(三)-項目結構


 

目錄結構

├── README.md            項目介紹
├── index.html           入口頁面
├── build              構建腳本目錄
│   ├── build-server.js         運行本地構建服務器,可以訪問構建后的頁面
│   ├── build.js            生產環境構建腳本
│   ├── dev-client.js          開發服務器熱重載腳本,主要用來實現開發階段的頁面自動刷新
│   ├── dev-server.js          運行本地開發服務器
│   ├── utils.js            構建相關工具方法
│   ├── webpack.base.conf.js      wabpack基礎配置
│   ├── webpack.dev.conf.js       wabpack開發環境配置
│   └── webpack.prod.conf.js      wabpack生產環境配置
├── config             項目配置
│   ├── dev.env.js           開發環境變量
│   ├── index.js            項目配置文件
│   ├── prod.env.js           生產環境變量
│   └── test.env.js           測試環境變量
├── mock              mock數據目錄
│   └── hello.js
├── package.json          npm包配置文件,里面定義了項目的npm腳本,依賴包等信息
├── src               源碼目錄  
│   ├── main.js             入口js文件
│   ├── app.vue             根組件
│   ├── components           公共組件目錄
│   │   └── title.vue
│   ├── assets             資源目錄,這里的資源會被wabpack構建
│   │   └── images
│   │      └── logo.png
│   ├── routes             前端路由
│   │   └── index.js
│   ├── store              應用級數據(state)
│   │   └── index.js
│   └── views              頁面目錄
│      
├── static             純靜態資源,不會被wabpack構建。
└── test              測試文件目錄(unit&e2e)
  └── unit              單元測試
      ├── index.js            入口腳本
      ├── karma.conf.js          karma配置文件
      └── specs              單測case目錄
          └── Hello.spec.js

vue組件命名規范
單文件組件的文件名應該要么始終是單詞大寫開頭 (PascalCase),要么始終是橫線連接 (kebab-case)。

在views文件夾下新建三個文件 home-page.vue和not-found.vue,login.vue,signup.vue,文件夾user,article,invest

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM