vue+vue-router+axios+element-ui構建vue實戰項目之三（認識項目文件）

在上一篇《vue+vue-router+axios+element-ui構建vue實戰項目之二（nodejs、vue-cli等環境安裝）》中，咱們經過安裝 nodejs 系統環境，以及 vue-cli 腳手架工具，在執行完命令後，咱們就已經將一個初始項目跑起來了。

那麼這篇文章，咱們就來認識下項目中的各文件夾及裏面的文件，它們是什麼，以及它們的做用。

話很少說，開幹。

 

項目初始文件解讀

 1 ├── node_modules                    # 項目依賴包文件夾
 2 ├── build                           # 編譯配置文件，通常不用管
 3 │   ├── build.js
 4 │   ├── check-versions.js
 5 │   ├── logo.png
 6 │   ├── utils.js
 7 │   ├── vue-loader.conf.js
 8 │   ├── webpack.base.conf.js
 9 │   ├── webpack.dev.conf.js
10 │   └── webpack.prod.conf.js
11 ├── config                           # 項目基本設置文件夾
12 │   ├── dev.env.js                   # 開發配置文件
13 │   ├── index.js                     # 配置主文件
14 │   └── prod.env.js                  # 編譯配置文件
15 ├── src                              # 項目源碼編寫文件
16 │   ├── App.vue                      # APP入口文件
17 │   ├── assets                       # 初始項目資源目錄，回頭刪掉
18 │   │   └── logo.png
19 │   ├── components                   # 組件目錄
20 │   │   └── Hello.vue                # 測試組件，回頭刪除
21 │   ├── main.js                      # 主配置文件
22 │   └── router                       # 路由配置文件夾
23 │       └── index.js                 # 路由配置文件
24 └── static                           # 資源放置目錄
25 ├── index.html                       # 項目入口html模板
26 ├── package.json                     # 項目依賴包配置文件
27 ├── .babelrc                         # babel 配置
28 ├── .postcssrc.js                    # postcss 配置
29 ├── .editorconfig                    # editor 配置
30 └── README.md                        # 項目說明文檔

好，以上就是項目完整的文件目錄結構。

其實，咱們開發的時候，主要就是操做 src 裏面的文件，不過開發的時候，還須要咱們從新整理下里面的文件。

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

 

配置src和static目錄

先配置 src 目錄，也能夠根據本身的實際需求配置目錄：

 1 ├── api                           // 接口調用工具文件夾
 2 │   └── index.js                   
 3 ├── components                    // 組件文件夾
 4 │    ├── header.vue                
 5 │    └── footer.vue                  
 6 ├── page                          // 頁面文件夾
 7 │   ├── content.vue               // 內容頁面
 8 │   └── index.vue                 // 首頁列表
 9 ├── router                        // 路由配置文件夾
10 │   └── index.js                
11 ├── store                         // vuex狀態管理目錄    
12 ├── style                         // scss 樣式存放目錄
13 │   └── style.scss                // 主樣式文件，能夠按分類建立多個文件夾
14 └── utils                         // 經常使用工具文件夾
15 │   └── index.js                    
16 ├── App.vue                       // APP入口文件
17 └── main.js                       // 項目配置文件

*.vue 文件，是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。

每一個 .vue文件包含三種類型的頂級語言塊 <template>, <script> 和 <style>。

這三個部分分別表明了 html,js,css。

 

接下來，咱們配置 static 目錄，比較簡單，適用於絕大多數項目：

1 ├── css               # 放第三方的樣式文件
2 ├── font # 放字體圖標文件 3 ├── image # 放圖片文件，裏面能夠根據圖片種類建立文件夾 4 └── js # 放第三方的JS文件，好比datepicker

可能有人會疑惑，src 目錄裏面已經包含樣式和JS，爲何還要在 static 文件裏面放置呢？

由於，若是是放在 src 目錄裏面，則每次打包的時候，都須要打包的。可是 static裏面的文件，咱們通常是不會去修改的，也不必 npm 安裝，直接引用就行了。

好了，本篇文章就這麼多，下節就開始實戰吧！

 

若是文章中存在錯誤的地方，麻煩請你們在評論中指正，以避免誤人子弟，謝謝！