vue 項目總結一文件夾結構配置

以前一段時間都在使用 vue 開發後臺管理系統，在摸索的過程當中對 vue 自己和模塊化、規範化開發有了更深的認知，如今記錄下來，但願對其餘須要開發項目的人有幫助。

項目配置

首先，在肯定好使用的框架和組件庫後，先要大體瞭解它們，作到文檔基本熟悉。本次開發使用到的有： vue ， vuex ， axios ， elementUI 。

而後能夠按官方指引，使用 vue-cli 搭建 vue 的項目，在項目裏按照上面的文檔嘗試修改，加深理解：

# 安裝依賴庫，建議指定 vue 和 element 版本，避免版本升級帶來意料以外的 bug

$ npm install vue@2.1.6  element-ui@1.4.6 vuex axios

#全局安裝腳手架

$ npm install -g vue-cli 

# 建立一個基於 webpack 模板的新項目my-project

$ vue init webpack my-project

# 進入項目目錄

$ cd my-project

# 安裝依賴

$ npm install

# 運行項目

$ npm run dev

運行以後，看到如下頁面代表項目環境搭建成功：

---

項目結構

搭建成功後，使用編輯器打開項目目錄，大體是這樣的結構：

相關文件和文件夾的含義：

build 文件夾: 裏面是對 webpack 開發和打包的相關設置，包括入口文件、輸出文件、使用的模塊等；

config 文件夾: 主要是指定開發和打包中的靜態資源路徑、要壓縮的文件類型、開發使用的端口號、開發使用虛擬服務器跨域請求 api 等。

node_modules: 項目的依賴庫；

src 文件夾： 咱們主要操做的地方，組件的增長修改等都在這個文件夾裏操做，下文會有詳細介紹；

static 文件夾: 靜態資源文件夾，放置不會變更的資源，直接被複制到最終的打包目錄（默認是dist/static）下；

.babelrc: 使用 babel 的配置文件，用來設置轉碼規則和插件；

.editorconfig: 代碼的規範文件，規定使用空格或 tab 縮進，縮進的長度是兩位仍是四位之類的代碼風格，使用的話須要在編輯器裏下載對應的插件；

.eslintignore: 指定 eslint 忽略的文件；

.eslintrc: 配置 eslint 的檢測規則，強制按照規則書寫代碼；

.gitignore: 指定 git 忽略的文件，全部 git 操做均不會對其生效；

.postcssrc: 指定使用的 css 預編譯器，裏面默認配置了 autoprefixer ，自動補全瀏覽器前綴；

favicon.ico: 瀏覽器標籤頁 title 旁邊的小圖標，這是須要咱們本身粘貼過來的；

index.html: 首頁文件，項目運行的時候，會自動將咱們在 src 文件夾裏生成的組件插入這個文件裏；

LICENSE: 項目聲明的 license；

package-lock.json: 當 node_modules 或 package.json 發生變化時自動生成的文件。這個文件主要功能是肯定當前安裝的包的依賴，以便後續從新安裝的時候生成相同的依賴，而忽略項目開發過程當中有些依賴已經發生的更新；

package.json: 指定項目開發和生成環境中須要使用的依賴庫；

README.md: 至關因而一個備註文件，對項目開發過程當中須要注意的地方進行一些說明。

---

src 文件夾結構

src 文件夾裏的文件夾設置是靈活的，能夠根據本身的習慣進行，沒必要雷同。下面是此次項目的結構：

assets: 放置靜態資源，包括公共的 css 文件、 js 文件、iconfont 字體文件、img 圖片文件 以及其餘資源類文件。之因此強調是公共的 css 文件，是由於要在組件的 css 標籤里加入 ‘scoped‘ 標記，將其做用範圍限制在此組件以及調用它的父級組件中，避免污染全局樣式；

components: 放置通用模塊組件。項目裏總會有一些複用的組件，例如彈出框、發送手機驗證碼、圖片上傳等，將它們做爲通用組件，避免重複工做；

http: 放置與後臺 api 相關的文件。這裏面有 axios 庫的實例配置文件、使用配置的 axios 實例接入 api 獲取數據的函數的集合的文件；

mixins: 放置混合選項的文件。具體來講，至關因而公用函數的集合，在組件中引用時，能夠做用於組件而沒必要書寫重複的方法；

pages: 放置主要頁面的組件。例如登陸頁、用戶信息頁等。一般是這裏的組件自己寫入一些結構，再引入通用模塊組件，造成完整的頁面；

router: 放置路由設置文件，指定路由對應的組件；

store: 放置 vuex 須要的狀態關聯文件，設置公共的 state、mutations 等；

App.vue: 入口組件，pages 裏的組件會被插入此組件中，此組件再插入 index.html 文件裏，造成單頁面應用；

main.js: 入口 js 文件，影響全局，做用是引入全局使用的庫、公共的樣式和方法、設置路由等。

---

對文件夾配置的總結先到此爲止，下一篇文章會是對 src 文件夾裏具體文件的配置和例子總結，有須要的能夠去 https://segmentfault.com/a/11... 看看。