V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Johnsen
V2EX  ›  分享创造

✌️ 基于 vue2 + vuex + vue-router 构建的移动端微应用

  •  
  •   Johnsen · 2017-08-17 09:19:07 +08:00 · 2436 次点击
    这是一个创建于 2416 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vue-mobile-starter

    View README in English

    基于 vue2 + vuex + vue-router 构建的移动端单页微应用,适合于 vue2、vuex、vue-router 核心概念的理解与掌握。

    前言

    做这个项目的初衷其实很简单,我司之前一直用 angular、react 进行 PC 端项目的开发,但是最近新开展了一些项目打算用 vue 来做移动端的开发(紧跟大厂的步伐🙄)。无奈之前只是看了看 vue 的语法,没有 vue 项目开发的实际经验,只能去找资料开始自学,这个项目就是一段时间来自学总结的成果。

    由于对 angular、react 的掌握程度不错,vue 的语法以及常用的api很快就看的差不多了。还有 vue-router,接触过angular-ui-routerreact-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.

    7 条回复    2017-08-18 14:37:11 +08:00
    ak47947
        1
    ak47947  
       2017-08-17 09:34:53 +08:00
    看起来不错,跟楼主学习下,练练手
    Johnsen
        2
    Johnsen  
    OP
       2017-08-17 09:48:41 +08:00
    @ak47947 哈哈,一起学习
    sobigfish
        3
    sobigfish  
       2017-08-17 14:20:08 +08:00
    那组 emoji 是谁画的?给个名字 /网址 谢谢
    Johnsen
        4
    Johnsen  
    OP
       2017-08-17 16:02:54 +08:00
    @sobigfish iconfont 阿里巴巴矢量图标库
    foursking
        5
    foursking  
       2017-08-17 17:43:39 +08:00
    mark 下 最近正在捣鼓 vue
    MushishiXian
        6
    MushishiXian  
       2017-08-18 13:52:33 +08:00
    好好好,有 vue 和 react 两个版本,可以好好学习了,谢谢楼主的分享!
    Johnsen
        7
    Johnsen  
    OP
       2017-08-18 14:37:11 +08:00
    @MushishiXian 哈哈哈,多写支持😀
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2767 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 12:48 · PVG 20:48 · LAX 05:48 · JFK 08:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.