轉載：石小明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

閱讀更多 代碼開發 的文章

關鍵字: JSON 高仿 路由器