最近想練習一個vue.js的專案，然後在網上找了些案例，但是查詢到的大部分都是用vue-cli腳手架和webpack模板自動生成專案結構。

用vue-cli自動生成這種方法固然簡單快捷，但是對於一些新手小白來說，光是搞清楚那些配置檔案的作用，就要用不少的時間去學習和理解。

所以，我自己用手動構建結構的方式，寫了一個基於Vue2.0的移動端小專案，程式碼中的每一個配置，我都寫有註釋解釋，希望對那些像我這樣剛剛入門vue的朋友們有所幫助。

https://github.com/zhangqian00/Vue2.x-mobileSystem

技術棧：

• Vue2.0
• Vue-Router
  路由
• Mint-ui 基於vue的ui框架
• M-ui 移動端ui框架
• Axios 第三方資料請求外掛
• Mockjs 生成隨機資料，攔截 Ajax 請求

專案效果圖

建立專案結構

介紹檔案作用

• components 存放元件的資料夾
• static 存放一些靜態檔案，例如圖片
• index.html 展現頁面
• main.js 入口檔案，程式執行會依照裡面的配置
• package.json node依賴包記錄，用 npm init命令生成
• webpack.config.js webpack配置檔案

配置webpack.config.js

因為專案是使用執行時構建方式，這樣也使得vue元件的運用更加方便清晰，所以還是需要webpack作為輔助工具。

此檔案並沒有配置打包的需求的配置，可根據需求來自行配置。

個人感覺這樣一步一步的手動建立檔案，對於小白來說，可以對整個Vue專案有一個很清楚的瞭解。每一步都知道為什麼這樣做，做了有什麼作用，對Vue或者webpack的入門學習都有一個基本的認識，對以後的學習也很有幫助。

我在每一個檔案裡程式碼都做了註釋，解釋程式碼的作用。這樣可以讓正在學習Vue的朋友們看得懂我寫的程式碼，也讓我自己在寫註釋的過程中理一理自己所理解的意思。

https://github.com/zhangqian00/Vue2.x-mobileSystem

這是專案的GitHub地址，希望能幫助正在學習Vue或webpack的朋友，也歡迎各位指出其中不足指出。

微信搜尋公眾號：前端很忙

獲取更多幹活分享，歡迎來搞！