資訊專(zhuān)欄INFORMATION COLUMN
vue-mobile-starter
View README in English
前言基于 vue2 + vuex + vue-router 構(gòu)建的移動(dòng)端單頁(yè)微應(yīng)用，適合于vue2、vuex、vue-router核心概念的理解與掌握。
做這個(gè)項(xiàng)目的初衷其實(shí)很簡(jiǎn)單，我司之前一直用angular、react進(jìn)行PC端項(xiàng)目的開(kāi)發(fā)，但是最近新開(kāi)展了一些項(xiàng)目打算用vue來(lái)做移動(dòng)端的開(kāi)發(fā)(緊跟大廠的步伐?)。無(wú)奈之前只是看了看vue的語(yǔ)法，沒(méi)有vue項(xiàng)目開(kāi)發(fā)的實(shí)際經(jīng)驗(yàn)，只能去找資料開(kāi)始自學(xué)，這個(gè)項(xiàng)目就是一段時(shí)間來(lái)自學(xué)總結(jié)的成果。
由于對(duì) angular、react 的掌握程度不錯(cuò)，vue 的語(yǔ)法以及常用的api很快就看的差不多了。還有 vue-router，接觸過(guò)angular-ui-router和react-router 人在看vue-router文檔的時(shí)候會(huì)有這樣的感受： 這三個(gè)簡(jiǎn)直是 ‘孿生兄弟’ 啊。 vuex 對(duì)于初學(xué)者而言可能是三個(gè)之中最難理解的，不過(guò)對(duì)于之前有接觸過(guò) redux 的人來(lái)說(shuō)，大體的概念可以說(shuō)是一致的。
開(kāi)始也找了不少素材，官方的examples以及GitHub上star較多的開(kāi)源項(xiàng)目，寫(xiě)的都很不錯(cuò)。不過(guò)呢官方的examples寫(xiě)的太過(guò)于精簡(jiǎn)，初學(xué)者看完會(huì)有種看不太夠的感覺(jué)，而GitHub上一些不錯(cuò)的vue開(kāi)源項(xiàng)目，比如說(shuō)vue2-elm（一個(gè)模仿餓了么的項(xiàng)目）。不過(guò)如果讓一個(gè)初學(xué)者去模仿這么大體量的項(xiàng)目，或許真的會(huì)望洋興嘆啊 ???
本項(xiàng)目雖說(shuō)是一個(gè)十來(lái)個(gè)頁(yè)面的小型項(xiàng)目，不過(guò)卻涉及到vue模塊的全局和局部應(yīng)用配置、第三方UI組件的使用、vuex stroe的合理化配置、vue-router編程式的導(dǎo)航，路由子路由配置，路由信息對(duì)象等。非常適合于新手對(duì)vue核心開(kāi)發(fā)理念的掌握。
開(kāi)源技術(shù)支持之后會(huì)做一版 react + redux 的版本，感興趣的同學(xué)可以持續(xù)關(guān)注哦。 React 版本
覺(jué)得此項(xiàng)目對(duì)您有幫助，可以點(diǎn)右上角 star 支持一下?
vue全家桶：vue2 + vuex + vue-router + vue-cli
jsonplaceholder：一個(gè)簡(jiǎn)單的在線模擬REST API服務(wù)器
axios：基于Promise 的 HTTP 請(qǐng)求客戶端,可同時(shí)在瀏覽器和 node.js 中使用
muse-ui：基于 Vue 2.0 和 Material Desigin 的 UI 組件庫(kù)
express：基于 Node.js 平臺(tái)的 web 應(yīng)用開(kāi)發(fā)框架
pm2：Node應(yīng)用進(jìn)程管理器
如何開(kāi)發(fā)# 克隆本倉(cāng)庫(kù) git clone https://github.com/JohnsenZhou/vue-mobile-starter.git # 進(jìn)入倉(cāng)庫(kù)目錄 cd vue-mobile-starter # 安裝依賴(lài) npm install # 啟動(dòng)項(xiàng)目，本地瀏覽地址 => localhost:8080 npm run dev # 打包壓縮 npm run build目錄結(jié)構(gòu)
. ├── README.md // README文件 ├── build // vue-cli生成的配置文件 ├── config // vue-cli生成的配置文件 ├── config.dev.json // 部署配置文件 ├── config.prod.json // 部署配置文件 ├── index.html // index入口文件 ├── node_modules ├── npm-shrinkwrap.json // 依賴(lài)版本鎖定 ├── package.json // npm 配置文件 ├── pm2.json // pm2 配置文件 ├── server.js // node 部署服務(wù)文件配置 ├── src // 項(xiàng)目開(kāi)發(fā)目錄 │?? ├── App.vue // 項(xiàng)目主組件 │?? ├── assets // 資源文件夾 │?? ├── components // vue通用組件 │?? ├── main.js // vue實(shí)例入口文件 │?? ├── router // vue-router配置文件 │?? ├── services // 接口文件 │?? ├── store // vuex配置文件 │?? ├── utils // js通用工具組件 │?? └── views // vue視圖頁(yè)面 └── static // 靜態(tài)資源文件效果演示
在線瀏覽Demo請(qǐng)戳這里
手機(jī)瀏覽請(qǐng)掃描下方二維碼 License項(xiàng)目通過(guò)阿里云部署
想了解詳細(xì)部署過(guò)程的同學(xué)請(qǐng)瀏覽 此文檔
MIT license.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112403.html
vue-mobile-starter View README in English 基于 vue2 + vuex + vue-router 構(gòu)建的移動(dòng)端單頁(yè)微應(yīng)用，適合于vue2、vuex、vue-router核心概念的理解與掌握。 前言 做這個(gè)項(xiàng)目的初衷其實(shí)很簡(jiǎn)單，我司之前一直用angular、react進(jìn)行PC端項(xiàng)目的開(kāi)發(fā)，但是最近新開(kāi)展了一些項(xiàng)目打算用vue來(lái)做移動(dòng)端的開(kāi)發(fā)(緊跟大廠的步伐?...
vue-mobile-starter View README in English 基于 vue2 + vuex + vue-router 構(gòu)建的移動(dòng)端單頁(yè)微應(yīng)用，適合于vue2、vuex、vue-router核心概念的理解與掌握。 前言 做這個(gè)項(xiàng)目的初衷其實(shí)很簡(jiǎn)單，我司之前一直用angular、react進(jìn)行PC端項(xiàng)目的開(kāi)發(fā)，但是最近新開(kāi)展了一些項(xiàng)目打算用vue來(lái)做移動(dòng)端的開(kāi)發(fā)(緊跟大廠的步伐?...
摘要：前端日?qǐng)?bào)精選專(zhuān)題之函數(shù)柯里化前端可用性保障實(shí)踐入門(mén)指南頁(yè)面布局這個(gè)屬性你可能都不知道如何監(jiān)聽(tīng)頁(yè)面變動(dòng)并高效響應(yīng)發(fā)布中文深入理解筆記集合與集合第期介紹譯系統(tǒng)設(shè)計(jì)入門(mén)之面試題解答設(shè)計(jì)一個(gè)網(wǎng)頁(yè)爬蟲(chóng)掘金基于構(gòu)建的移動(dòng)端微應(yīng)用個(gè)人文章 2017-08-11 前端日?qǐng)?bào) 精選 JavaScript專(zhuān)題之函數(shù)柯里化前端可用性保障實(shí)踐CSS入門(mén)指南-4：頁(yè)面布局 這5個(gè)CSS屬性你可能都不知道！如何監(jiān)聽(tīng)...
閱讀 3457·2021-09-08 09:45
閱讀 1322·2019-08-30 15:53
閱讀 1597·2019-08-30 14:12
閱讀 1034·2019-08-29 17:01
閱讀 2633·2019-08-29 15:35
閱讀 471·2019-08-29 13:09
閱讀 2040·2019-08-29 12:32
閱讀 3142·2019-08-26 18:37
