✌️ 基於 vue2 + vuex + vue-router 構建的移動端微應用

vue-mobile-starter

View README in English

基於 vue2 + vuex + vue-router 構建的移動端單頁微應用，適合於vue二、vuex、vue-router核心概念的理解與掌握。

前言

作這個項目的初衷其實很簡單，我司以前一直用angular、react進行PC端項目的開發，可是最近新開展了一些項目打算用vue來作移動端的開發(緊跟大廠的步伐?)。無奈以前只是看了看vue的語法，沒有vue項目開發的實際經驗，只能去找資料開始自學，這個項目就是一段時間來自學總結的成果。

因爲對 angular、react 的掌握程度不錯，vue 的語法以及經常使用的api很快就看的差很少了。還有 vue-router，接觸過angular-ui-router和react-router 人在看vue-router文檔的時候會有這樣的感覺： 這三個簡直是 ‘孿生兄弟’ 啊。 vuex 對於初學者而言多是三個之中最難理解的，不過對於以前有接觸過 redux 的人來講，大致的概念能夠說是一致的。

開始也找了很多素材，官方的examples以及GitHub上star較多的開源項目，寫的都很不錯。不過呢官方的examples寫的太過於精簡，初學者看完會有種看不太夠的感受，而GitHub上一些不錯的vue開源項目，好比說vue2-elm（一個模仿餓了麼的項目）。不過若是讓一個初學者去模仿這麼大致量的項目，或許真的會望洋興嘆啊 ???

本項目雖然說是一個十來個頁面的小型項目，不過卻涉及到vue模塊的全局和局部應用配置、第三方UI組件的使用、vuex stroe的合理化配置、vue-router編程式的導航，路由子路由配置，路由信息對象等。很是適合於新手對vue核心開發理念的掌握。

以後會作一版 react + redux 的版本，感興趣的同窗能夠持續關注哦。 React 版本

以爲此項目對您有幫助，能夠點右上角 star 支持一下?

開源技術支持

1. vue全家桶：vue2 + vuex + vue-router + vue-cli

2. jsonplaceholder：一個簡單的在線模擬REST API服務器

3. axios：基於Promise 的 HTTP 請求客戶端,可同時在瀏覽器和 node.js 中使用

4. muse-ui：基於 Vue 2.0 和 Material Desigin 的 UI 組件庫

5. express：基於 Node.js 平臺的 web 應用開發框架

6. pm2：Node應用進程管理器

如何開發

# 克隆本倉庫
git clone https://github.com/JohnsenZhou/vue-mobile-starter.git

# 進入倉庫目錄
cd vue-mobile-starter

# 安裝依賴
npm install

# 啓動項目，本地瀏覽地址 => localhost:8080
npm run dev

# 打包壓縮
npm run build

目錄結構

.
├── README.md            // README文件
├── build                // vue-cli生成的配置文件
├── config               // vue-cli生成的配置文件
├── config.dev.json      // 部署配置文件
├── config.prod.json     // 部署配置文件
├── index.html           // index入口文件
├── node_modules         
├── npm-shrinkwrap.json  // 依賴版本鎖定
├── package.json         // npm 配置文件
├── pm2.json             // pm2 配置文件
├── server.js            // node 部署服務文件配置
├── src                  // 項目開發目錄
│   ├── App.vue          // 項目主組件
│   ├── assets           // 資源文件夾
│   ├── components       // vue通用組件
│   ├── main.js          // vue實例入口文件
│   ├── router           // vue-router配置文件
│   ├── services         // 接口文件
│   ├── store            // vuex配置文件
│   ├── utils            // js通用工具組件
│   └── views            // vue視圖頁面
└── static               // 靜態資源文件

效果演示

在線瀏覽Demo請戳這裏

1. 項目經過阿里雲部署

2. 想了解詳細部署過程的同窗請瀏覽 此文檔

手機瀏覽請掃描下方二維碼

License

MIT license.