vue2的成长之路

学习了vue2之后,个人感觉这个框架确实不错,相比reactjs和angularjs来说,也比较好入门,重点是官方文档有中文版的。本人就用vuex2做了一个移动端的demo,并封装成了app并调用了手机的一些硬件(相机,扫码等),所用到的技术有vue2,vue-router,vue-resource,vuex,mint,scss,websocket等

编译好的代码和打包好的apk文件在dist文件夹下!

vue2高仿网易云音乐 网页demo

vu2移动端的架构,封装app

1.项目从零开始搭建

对于vue2的语法,不是很明白的同学请先到vue2官网熟悉语法,包括es2015,webpack等,这个就不在一一说明。
  首先Vue.js提供的官方命令行工具来初始化我们的项目:

                  # 全局安装 vue-cli
                  $ npm install --global vue-cli
                  # 创建一个基于 webpack 模板的新项目
                  $ vue init webpack vue2_app
                  # 安装依赖,走你
                  $ cd vue2_app
                  $ npm install
                  $ npm run dev   

刚开始初始化项目的时候构建工具会询问一些有关项目的一些信息,可根据自己的需要进行选择,如果你不是太明白,一路回车就可以了。对于没有翻墙的同学npm加载可能比较慢,这时可以使用淘宝的镜像cnpm,具体怎么用点击这里。在npm run dev之后我们就可以在浏览器中查看当前项目的内容了。对于端口冲突的同学,请在/config/index.js文件中第26行自行修改。看到下面的内容说明你的项目已经初始化成功了。
    

success
success

2.改造自己的项目 router+scss+iconfont

手写修改app.vue文件如下:

        <template>   
         <keep-alive>   
               <router-view></router-view>
          </keep-alive>
        </template>
        <script>
        export default {
            }

        </script>

        <style lang="scss">


        </style>

其中每个文件的代码就不再一一说明,整个项目src中的目录如下:
    

success
success

3. scss

为了使项目UI好看点,加入了样式,但是对于习惯用sass,less的同学来说,突然间用css来写样式总是感觉不太方便,这里我们就用csss的语法来编写css,对于官方提供的webpack工具,已经配置好了,我们只需要安装两个依赖的npm包就可以使用scss了,如下:
cnpm install sass-loader
cnpm install node-sass
注意:用windows系统的用npm安装可能会报错,建议用cnpm

4.mnit

由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。已发布了 2.0 版本,支持了vue2。引入方式为:

                    // ui框架  
                      import MintUI from 'mint-ui'   
                      import 'mint-ui/lib/style.css'   
                      Vue.use(MintUI)

当然也可按需引入,来减少项目的大小。具体怎么用请参考官网:Mint UI官网手册

5.字体文件用的是阿里巴巴矢量图标库,可以自定义需要哪些图标,用着比较方便。

            // 阿里字体图标
            import './static/css/neat-min.css'
            import './static/css/iconfont.css'

6.vuex和vue-resource的使用

vue-resource的使用比较简单,对于具体怎么使用请参考官方手册。vuex这里把store的action,getters,mutation封装成了一个独立的文件。对于他们的调用和映射等,我总结了一下,可以做个参考,如下:

总结
总结

7.echart的使用

     //整体引入  
    // import echarts from 'echarts'  
    // 引入 ECharts 主模块 按需引入        
    var echarts = require('echarts/lib/echarts');   
     // 引入柱状图        
    require('echarts/lib/chart/bar');   
    // 引入提示框和标题组件  
     require('echarts/lib/component/tooltip');   
      require('echarts/lib/component/title');

echart主流的web图表控件,是在canvas类库zrender的基础上做的主题图库,优点有数据驱动,图例丰富,功能强大,官网有更详细的介绍,有同学的可以去参考下。

8.websocket

WebSocket协议是基于TCP的一种新的协议。WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符。它实现了浏览器与服务器全双工(full-duplex)通信。这个需要用nodejs做后台才能正常测试demo,后台代码在根目录下的static文件夹中socket_server.js。可以测试一下。

9.打包成app,调用手机底层应用,比如相机等

9.1打包平台

目前能打包成app的平台很多,随着淘宝weex的开源,让webapp又火了一把,目前可以打包成app的平台总结了几个:pnonegap ,APICloud,appcan,wex5 ,weex,IUAP Mobile具体怎么应用大家可以自己去各自的官网详细了解。

9.2调用底层

Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。

10.项目的效果图

页面1
页面1

  
页面2
页面2

  
页面3
页面3

  
socket
socket

11. 最后在项目的dist文件里面有编译好的源码和已经打包好的apk包,谢谢!

vue2高仿网易云应用

现在对所用的框架做了新的调整,请移步vu2移动端的架构,封装app

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 我外甥初二,被老师告家长说早恋了。我姐如临大敌不知所措,仿佛自己儿子的远大前程就要毁于一旦了。我看她六神无主的样子...
    鲁山阅读 209评论 0 0
  • 趁着年假,得闲前往雁荡山游玩两日。所谓黄山归来不看岳, 九寨归来不看水。”两个地方都去过了,雁荡山景色确实山水逊上...
    唐衣可俊阅读 415评论 0 1
  • 理智的人使自己适应这个世界;不理智的人却硬要世界适应自己。——萧伯纳 为什么强调理智和理性,不会让人变得无情冷血失...
    24K超超老师阅读 264评论 0 0
  • 采集端进程正常,目标端进程显示ABENDED,通过view report 进程名,发现错误日志为: 定位问题为采集...
    倚岚听风阅读 3,640评论 0 0
  • 01周末,我去参加清水的婚礼,清水全名叫的陈清水,我的高中同班同学。新娘张真真,也是我们的高中同班同学,还是我们的...
    墨六风阅读 2,538评论 18 48