Vue項目目錄架構

王偉廷發布于2019-08-22 18:39 / 788人閱讀

摘要：前端開發規范之項目目錄架構概述項目開發的目錄結構保持一致，容易理解并方便構建與管理，方便日后的維護和其他同事的閱讀。

前端開發規范之Vue項目目錄架構
概述
Vue項目開發的目錄結構保持一致，容易理解并方便構建與管理，方便日后的維護和其他同事的閱讀。
一、Vue目錄結構

二、主要項目目錄介紹
1.build目錄是webpack主要的配置目錄

其中比較重要是 webpack.base.conf.js
兼容ES6配置

配置地址常量

配置自定義loader

2.config目錄是對webpack和node最基礎的配置，定義了當前所屬環境，監聽的端口號，生成靜態文件目錄位置等

其中比較重要是 index.js
配置node監聽端口、靜態文件位置，靜態文件引用前綴、node代理等

3.js目錄是項目開發過程中的自行開發或引用的小型js庫

其中比較重要的是 http.js，封裝了axios庫的常見用法，可以配置統一的request攔截器和response攔截器，其他的有類似日期類庫，echarts封裝類，vue的mixin庫等

4.stylus目錄是css預處理語言目錄

主要的樣式文件
base --- 基礎組件樣式
mixin --- 混合函數庫
reset --- 重置樣式庫
variable --- 全局變量聲明

5.其他components、router、store目錄
這三個目錄結構是vue項目開發過程中獨有的，分別代表vue組件目錄，vue-router配置目錄、以及vuex配置目錄。
具體規范見
vue組件開發規范
vue-router配置規范
vuex配置規范

三、結語
目前開發vue項目的前端目錄結構大致與此文大檔介紹的架構一致，可能由于不同項目有具體需求會進行微量修改，但大體目錄骨架與此一致，若后續進行vue項目開發，需遵循此目錄架構，以方便各位同事快速在不同項目間開展工作。
后續若由于技術棧更新會適當調整此文檔

云服務器 GPU云服務器云服務器搭建vue項目騰訊云服務器部署vue項目 vue項目放到云服務器上阿里云服務器搭建vue項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96054.html

Vue實戰—從目錄結構談可擴展項目架構設計

摘要：好的項目代碼結構會大大提升項目的維護性和可擴展性。多說無益，我這里直接給大家一個示意圖，大家可以按照我給的這個項目結構組織項目。你連文件目錄都設計不好，我拿什么相信你能設計出來可擴展的程序很多人都會用項目腳手架，也會跑hello world，然后再寫寫簡單的todolist。但是再往下深入就難了。比如很多教程和老師都會說，大家要多問一個為什么。其實我想說多問你妹啊。我都不知道問為什么...

yankeys 2019-08-23 16:54 評論0 收藏0
從零開始做Vue前端架構（1）

摘要：前言想想也已經做過不少架構的項目了，有基于，基于，基于，基于的。好了，介紹完畢，接下來，我就從零開始，一步一步建起前后端完全分離的前端架構了。前言想想也已經做過不少架構的項目了，有基于vue，基于react，基于thinkPHP，基于laravel的。做多了，也就對現有的架構有各種想法，有好的，有壞的，總之，用起來還是不爽。vue-cli雖然可以很快地構建并使用，尤其是vue-c...

frolc 2019-06-24 17:56 評論0 收藏0
從零開始做Vue前端架構（3）

摘要：前言這一篇，我們將接著上篇來完成創建項目文件目錄架構。總結這篇主要是文件和目錄架構的東西，讀者務必運行一下完整的項目。因此，下一篇，我們將通過實現本地數據接口模擬從零開始做前端架構項目完整代碼前端架構子咻前言這一篇，我們將接著上篇來完成創建項目文件、目錄架構。回顧先回顧一下現在項目有哪些東西了： . ├── app │?? ├── app.vue │?? ├── common ...

dinfer 2019-06-24 17:56 評論0 收藏0
MEVN 架構（MongoDB + Express + Vue + NODEJS）搭建

摘要：連接數據庫如果不自己創建默認數據庫會自動生成地址跟第一步的地址對應。現在回過頭來看里面的入口文件最后，我們在瀏覽器輸入，就會跳到。到此為止，我們就完成了整個前后端各自開發到正式部署的流程。一個完整的網站服務架構包括：1、web frame ---這里應用express框架2、web server ---這里應用nodejs3、Database ---這里應用monggoDB4、...

Lsnsh 2019-08-21 16:18 評論0 收藏0