轉載：石小明https://juejin.im/post/5dd3df0f5188253dbe5ef23a#comment

使用的技術棧

Vue：Vue、Vue-router、Vuex、Vue-cli

外掛：vue-awesome-swiper、better-scroll、axios

CSS的預處理框架：stylus

api：後臺資料介面

專案目錄

README.md //專案的說明檔案

package.json //第三方依賴包配置

package-lock.json //幫助我們去確定安裝的第三方依賴包的具體的版本，保持團隊程式設計的統一

LICENSE //開源協議的說明

index.html //專案預設的首頁

.postcssrc.js //是對postcss的配置項

.gitgnore //不需要上傳到git上的檔案管理

.eslintrc.js //對程式碼進行檢驗，是否標準

.eslintignore //配置不需要eslintrc檢測工具檢測的檔案

.editorconfig //配置編輯器總風格統一的自動化格式的語法

.babelrc//做一些語法的轉換，編譯成瀏覽器所能識別的程式碼

static//目錄下放的是一些靜態資源，靜態圖片，靜態資料，和後續模擬json資料

node_modules//專案中需要用到的第三方node包

src//放的是專案的原始碼

src/main.js //整個專案的入口檔案

src/app.vue//整個專案最原始的根元件

src/router/index.js//專案的路由放置位置

src/components//專案裡要用的一些小元件

src/assets//專案中需要用到的圖片

config//放置專案配置檔案

config/index.js//放基礎配置

config/dev.env.js//開發環境配置資訊

config/prod.env.js//線上環境配置資訊

build//放置專案打包的webpack配置資訊，vue-cli會自動構建

build/webpack.base.conf.js//基礎的webpack配置資訊

build/webpack.dev.conf.js//開發環境的webpack配置資訊

build/webpack.prod.conf.js//線上環境的webpack配置項

效果圖

慕課網：https://coding.imooc.com/class/chapter/203.html

原始碼：https://github.com/shifengming/Tranvel