JohnsenZhou / Vue Mobile Starter
Licence: mit
☘ A starter project structure for Vue.js app.
Stars: ✭ 105
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Mobile Starter
Xyy Vue
🎨基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》
Stars: ✭ 1,316 (+1153.33%)
Mutual labels: vuex, vue-router
Vue Taobao
😀史诗级😀巨仿淘宝手机端(vue2.0以上+vue-router+axios+vuex+webpack+betterscroll等)
Stars: ✭ 85 (-19.05%)
Mutual labels: vuex, vue-router
Sahx Admin
SAHX-Admin 是套功能较为完整的后台管理系统架构, 以Thinkjs 作为中间层, Vuejs作为前端模块化开发, AdminLET作为前端UI, 实现了前后端分离, 前端组件化, 便于多人协同开发.
Stars: ✭ 80 (-23.81%)
Mutual labels: vuex, vue-router
Vue Typescript Music
🔥 基于 vue 全家桶 音乐项目(Music project) vue+typescript 实现 高仿 网易云音乐 移动端WebApp
Stars: ✭ 94 (-10.48%)
Mutual labels: vuex, vue-router
Ohmo Vue
这是一个完全由 Vue 全家桶来实现的轻博客应用,应用了Vuex对所有状态数据进行管理并优化整体结构,后端应用Node.js开发的全栈应用,由LeanCloud提供数据存储服务。
Stars: ✭ 90 (-14.29%)
Mutual labels: vuex, vue-router
Vue Cli3 Multipage
由vue-cli3搭建的多页面多路由初始化项目包,包含ESlint,Axios,vue-router,vuex,babel,以及自己封装的异步请求API接口。
Stars: ✭ 76 (-27.62%)
Mutual labels: vuex, vue-router
Cool Admin Vue
cool-admin一个很酷的后台权限管理框架,模块化、插件化、CRUD极速开发,永久开源免费,基于midway.js 2.0、typeorm、mysql、jwt、element-ui、vuex、vue-router、vue等构建
Stars: ✭ 73 (-30.48%)
Mutual labels: vuex, vue-router
Running Time
Sample Single Page Application using Laravel & Vue.js + Vuex + Vue-Router
Stars: ✭ 90 (-14.29%)
Mutual labels: vuex, vue-router
Vue Boilerplate
Vue 2.0 boilerplate,based on webpack and es6,includes vuex,vue-router,vue-resource, vuelidate
Stars: ✭ 94 (-10.48%)
Mutual labels: vuex, vue-router
Vue Music163
A webapp what base Vue2.0 contains seaching and playing music
Stars: ✭ 91 (-13.33%)
Mutual labels: vuex, vue-router
Putongoj Fe
The front end of the Putong Online Judge -- An online judge with nothing special
Stars: ✭ 74 (-29.52%)
Mutual labels: vuex, vue-router
Vue2 Shop
A shop developed with Vue2 + Vue-router + Axios + Vuex + Node + Express + MongoDB + Webpack
Stars: ✭ 103 (-1.9%)
Mutual labels: vuex, vue-router
Vue2 Admin
基于vue-element-admin、Vue2 权限、监控、管理系统(包含地图等嵌套)
Stars: ✭ 74 (-29.52%)
Mutual labels: vuex, vue-router
Vue Studymaps
使用 Vue.js 开发的聚合应用。通过爬虫抓取平时浏览的网站,省去逐个点开网页的时间。
Stars: ✭ 71 (-32.38%)
Mutual labels: vuex, vue-router
Vue Awesome Template
☀基于[email protected]的[email protected] 项目模板;集成各种常用组件、轮子、最佳实践;
Stars: ✭ 70 (-33.33%)
Mutual labels: vuex, vue-router
Vue Memo
Using Vue.js for memo web App. webpack, vuex, vue-router, Firebase.
Stars: ✭ 88 (-16.19%)
Mutual labels: vuex, vue-router
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+1140%)
Mutual labels: vuex, vue-router
vue-mobile-starter ·
基于 vue2 + vuex + vue-router 构建的移动端单页微应用,适合于vue2、vuex、vue-router核心概念的理解与掌握。
前言
本项目虽说是一个十来个页面的小型项目,不过却涉及到vue模块的全局和局部应用配置、第三方UI组件的使用、vuex stroe的合理化配置、vue-router编程式的导航,路由子路由配置,路由信息对象等。非常适合于新手对vue核心开发理念的掌握。
之后会做一版 react + redux 的版本,感兴趣的同学可以持续关注哦。查看 React 版本
开源技术支持
- vue全家桶:vue2 + vuex + vue-router + vue-cli
- jsonplaceholder:一个简单的在线模拟REST API服务器
- axios:基于Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用
- muse-ui:基于 Vue 2.0 和 Material Desigin 的 UI 组件库
- express:基于 Node.js 平台的 web 应用开发框架
- 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 // 静态资源文件
效果演示
- 项目通过阿里云部署
- 想了解详细部署过程的同学请浏览 此文档
手机浏览请扫描下方二维码
License
MIT license.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].