Vue2+VueRouter2+Webpack+Axios 構建項目實戰（三）認識項目全部文件

 

這一篇介紹vue框架的全部文件，讓你對vue框架有一個大概的認知，公衆號已經準備了vue實戰教程，若是您有須要，能夠在公衆號回覆「vue」獲取。

 

《Vue2+VueRouter2+Webpack+Axios 構建項目實戰（二）配置環境及構建初始項目》中，咱們經過安裝 nodejs 系統環境，以及 vue-cli 腳手架工具，在執行完命令後，咱們就已經將一個初始項目跑起來了。

 

可是，咱們的項目代碼，還一個都沒有看到。所以，這個章節，咱們來認識一下全部的文件。

 

初始文件解析

 

├── README.md  // 項目說明文檔
├── node_modules  // 項目依賴包文件夾
├── build   // 編譯配置文件，通常不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config  // 項目基本設置文件夾
│   ├── dev.env.js  // 開發配置文件
│   ├── index.js  // 配置主文件
│   └── prod.env.js  // 編譯配置文件
├── index.html   // 項目入口文件
├── package-lock.json  // npm5 新增文件，優化性能
├── package.json  // 項目依賴包配置文件
├── src    // 咱們的項目的源碼編寫文件
│   ├── App.vue  // APP入口文件
│   ├── assets  // 初始項目資源目錄，回頭刪掉
│   │   └── logo.png
│   ├── components // 組件目錄
│   │   └── Hello.vue // 測試組件，回頭刪除
│   ├── main.js // 主配置文件
│   └── router // 路由配置文件夾
│       └── index.js   // 路由配置文件
└── static // 資源放置目錄

 

好，如上，就是咱們的 vue 初始化後獲得的一個項目的完整結構。其餘大多數文件咱們是不用管的。若是要管的話，我在後面的章節也會去詳細說明。

 

咱們絕大多數的操做，就是在 src 這個目錄下面。默認的 src 結構比較簡單，咱們須要從新整理。

 

另外 static 資源目錄，咱們也須要根據放置不一樣的資源，在這邊構建不一樣的子文件夾。

 

咱們來配置 src 目錄

 

先不要管這些文件的內容，咱們先創建這些空的文件在這邊。而後咱們後面去完善它。

咱們的這個項目是要作兩個頁面，一個是 cnodejs 的列表頁面，一個是詳情頁面。

因此，我把項目文件夾整理成以下的結構

 

├── App.vue // APP入口文件
├── api  // 接口調用工具文件夾
│   └── index.js  // 接口調用工具
├── components  // 組件文件夾，目前爲空
├── config  // 項目配置文件夾
│   └── index.js // 項目配置文件
├── frame  // 子路由文件夾
│   └── frame.vue // 默認子路由文件
├── main.js  // 項目配置文件
├── page  // 咱們的頁面組件文件夾
│   ├── content.vue // 準備些 cnodejs 的內容頁面
│   └── index.vue  // 準備些 cnodejs 的列表頁面
├── router  // 路由配置文件夾
│   └── index.js  // 路由配置文件
├── style  // scss 樣式存放目錄
│   ├── base   // 基礎樣式存放目錄
│   │   ├── _base.scss   // 基礎樣式文件
│   │   ├── _color.scss  // 項目顏色配置變量文件
│   │   ├── _mixin.scss  // scss 混入文件
│   │   └── _reset.scss  // 瀏覽器初始化文件
│   ├── scss   // 頁面樣式文件夾
│   │   ├── _content.scss  // 內容頁面樣式文件
│   │   └── _index.scss  // 列表樣式文件
│   └── style.scss  // 主樣式文件
└── utils     // 經常使用工具文件夾
    └── index.js  // 經常使用工具文件

 

由於咱們刪除了一些默認的文件，因此這個時候項目必定是報錯的，先無論他，咱們根據咱們的需求，新建如上的項目結構。這些都是在 src 目錄裏面的結構。

 

咱們來配置 static 目錄

 

這個目錄比較簡單，由於這個項目咱們的資源很少，可是，爲了個人這系列博文可以適合大多數的項目的開發，通常，我搞成下面這個樣子：

 

├── css   // 放一些第三方的樣式文件
├── font  // 放字體圖標文件
├── image  // 放圖片文件，若是是複雜項目，能夠在這裏面再分門別類
└── js   // 放一些第三方的JS文件，如 jquery

 

你可能很奇怪，咱們不是把樣式和 JS 都寫到裏面去麼，爲何還要在這邊放呢？

由於，若是是放在 src 目錄裏面，則每次打包的時候，都須要打包的。這回增長咱們的打包項目的時間長度。並且，一些地方放的文件，咱們通常是不會去修改的，也不必 npm 安裝，直接引用就行了。你能夠根據本身的狀況，對這些能夠不進行打包而直接引用的文件提煉出來，放在資源目錄裏面直接調用，這樣會大大的提升咱們的項目的打包效率。

好，就這麼搞，咱們的文件架構就搞好了，下一張，咱們來開始寫代碼了。

 

做者：FungLeo