vue+uniapp快速入门

前端技术栈：

  • VUE: MVC框架 vue@2.6.3
  • uni-app: uniapp官方跨端API调用 uniapp
  • Uview: uniapp生态最好的UI库 uview
  • Weex： 富交互页面或主要页面等需要高性能的页面使用Nvue模式（内置weex） weex
  • Weex-ui： weex官方UI库 Weex-Ui 或 Weex-ui/
  • Api请求库: flyjs

毫无疑问，vue+uniapp+uview+weex是目前在能保证不错的性能前提下开发APP或开发跨平台应用最快捷最省成本的方式

工程目录说明

  1. ├─App.vue ------------------------------------- vue跟组件
  2. ├─main.js ------------------------------------- vue入口js
  3. ├─manifest.json ------------------------------------- uni-app配置文件
  4. ├─package.json ------------------------------------- 项目依赖包
  5. ├─pages.json ------------------------------------- 路由配置文件
  6. ├─uni.scss ------------------------------------- uni-app全局scss文件，文件内的样式会编译到每个页面
  7. ├─vue.config.js ------------------------------------- vue webpack配置文件
  8. ├─treer.md ------------------------------------------项目目录说明
  9. ├─utils ------------------------------------- 工具函数
  10. |   ├─emojimap.js ------------------------------------- 表情编译 解析函数
  11. |   ├─index.js ------------------------------------- 全局工具函数
  12. |   ├─nvueCommon.js ------------------------------------- nvue页面工具函数
  13. |   ├─share.js------------------------------------- 分享
  14. |   └websocket.js ------------------------------------- websocket 工厂函数，支持断线重连
  15. ├─store ------------------------------------- 全局状态管理
  16. ├─static ------------------------------------- 静态文件
  17. |   ├─uni.css ------------------------------------- 样式文件
  18. |   ├─images ------------------------------------- 图片
  19. |   ├─fonts ------------------------------------- 字体图标
  20. |   ├─css ------------------------------------- css样式文件
  21. |   ├─svga ------------------------------------- 直播礼物动画文件
  22. ├─platforms ------------------------------------- 平台页面目录
  23. ├─pagesC ------------------------------------- 订单、商品、直播页面目录
  24. |   ├─chat ------------------------------------- 聊天
  25. |   ├─wallet ------------------------------------- 钱包页面目录
  26. |   ├─shop ------------------------------------- 店铺页面目录
  27. |   ├─search ------------------------------------- 搜索页面目录
  28. |   ├─order ------------------------------------- 订单页面目录
  29. |   ├─live ------------------------------------- 直播页面目录
  30. |   ├─integral ------------------------------------- 积分页面目录
  31. |   ├─goodsComment ------------------------------------- 商品评论
  32. |   ├─goods ------------------------------------- 商品页面目录
  33. |   ├─forget ------------------------------------- 忘记密码
  34. |   ├─diy ------------------------------------- 首页装修
  35. |   ├─components ------------------------------------- 页面目录内的组件（编译小程序可以减少主包大小）
  36. ├─pagesB ------------------------------------- 页面目录
  37. |   ├─webview ------------------------------------- webview
  38. |   ├─shortVideo ------------------------------------- 短视频
  39. |   ├─setting ------------------------------------- 设置目录
  40. |   ├─seller ------------------------------------- 订单售后目录
  41. |   ├─register ------------------------------------- 注册目录
  42. |   ├─my ------------------------------------- 个人中心目录
  43. |   ├─message ------------------------------------- 消息通知和IM页面
  44. |   ├─member ------------------------------------- 会员目录
  45. |   ├─login ------------------------------------- 登录目录
  46. |   ├─coupon ------------------------------------- 优惠券目录
  47. |   ├─components ------------------------------------- 组件目录
  48. |   ├─comment ------------------------------------- 留言目录
  49. |   ├─category ------------------------------------- 商品分类目录
  50. |   ├─article ------------------------------------- 文章
  51. |   ├─tabBar ------------------------------------- tabbar
  52. |   ├─find ------------------------------------- 发现
  53. ├─pages ------------------------------------- tabbar页面
  54. |   ├─tabBar
  55. |   |   ├─appLiveStream.nvue ------------------------------------- app端直播
  56. |   |   ├─appShortVideo.nvue ------------------------------------- app端短视频
  57. |   |   ├─find.vue ------------------------------------- 发现
  58. |   |   ├─h5mpLiveStream.vue ------------------------------------- 直播
  59. |   |   ├─h5mpShortVideo.vue ------------------------------------- 短视频
  60. |   |   ├─home.nvue ------------------------------------- home页面
  61. |   |   ├─index.nvue ------------------------------------- app端首页根组件
  62. |   |   ├─index.vue ------------------------------------- 首页根组件
  63. |   |   ├─message.vue ------------------------------------- 消息
  64. |   |   ├─myCenter.vue ------------------------------------- 个人中心
  65. |   |   ├─publishVideo.vue ------------------------------------- 发布短视频
  66. |   |   ├─components ------------------------------------- 组件
  67. ├─graceUI ------------------------------------- ui组件
  68. ├─config ------------------------------------- 项目配置文件
  69. |   ├─appUpdateConfig.js -------------------------------- app更新配置
  70. |   ├─constValue.js ------------------------------------- 项目长量
  71. ├─components ------------------------------------- 组件目录
  72. ├─api ------------------------------------- 接口