從零開始作Vue前端架構（3）

前言

這一篇，咱們將接着上篇來完成建立項目文件、目錄架構。

回顧

先回顧一下如今項目有哪些東西了：

.
├── app
│   ├── app.vue
│   ├── common
│   │   ├── img
│   │   ├── js
│   │   └── scss
│   ├── index.html
│   ├── index.js
│   ├── router
│   │   └── index.js
│   └── views
│       └── home
│           └── index.vue
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
└── webpack.config.js

開發

整體看一下建立了哪些東西：

.
├── app
│   ├── api // 放get/post接口
│   ├── app.vue // vue主文件
│   ├── common // 放公共靜態資源
│   ├── components // 該項目都通用的公用組件
│   ├── componentsBase // 全部項目都通用的公用組件，以後能夠作成npm
│   ├── directives // Vue的directives
│   ├── filters // Vue的filters
│   ├── index.html // 模板文件
│   ├── index.js // 入口文件
│   ├── mixins // Vue的mixins
│   ├── router // Vue的路由配置文件夾
│   ├── store // vue-redux的文件夾，暫時不用，由於並非全部項目都須要redux的
│   └── views // 視圖
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
└── webpack.config.js

這節要是一個一個放代碼和步驟，會很是繁瑣能夠枯燥，因此咱們能夠直接看完整版的項目，代碼很是簡單，一眼掃完的那種，因此直接看項目比我這裏詳細地寫會快不少不少，地址：戳這裏>>

幾乎全部的文件夾我都有建markdown文檔，方便你們理解。另外，我也是建議，每一個文件夾都配一份markdown說明文檔，這真的很重要！！！

若是有什麼問題能夠評論，我看到會第一時間回覆的。

總結

這篇主要是文件和目錄架構的東西，讀者務必運行一下完整的項目。

運行開發環境npm run dev的過程當中，咱們在調試器中會發現有一個接口錯誤，並帶有'少年，是否是忘了npm run mock? '的警告。這是由於在首頁，咱們會有一個ajax請求，但咱們這時候還沒建立本地請求模擬數據接口的服務，因此報錯了。

所以，下一篇，咱們將經過koa實現本地數據接口模擬 - 從零開始作Vue前端架構（4）

項目完整代碼

Vue前端架構-by 子咻