移动端适配 路由懒加载 css书写方案

Author: alistar

README.md

@@ -1,4 +1,5 @@
-# 94club.github.io（移动端demo, 完全学习https://github.com/zaofeng/vue2-elm）
+# 94club.github.io
+#### 移动端demo, 完全学习https://github.com/zaofeng/vue2-elm
 
 # 项目布局
 

src/App.vue

@@ -10,14 +10,7 @@ export default {
   name: 'App'
 }
 </script>
-
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+<style lang='scss'>
+  @import './style/index.scss';
 </style>
+

src/NOTE.txt

@@ -0,0 +1,39 @@
+####关于css的书写放不放在.vue文件中
+同意： (https://www.mmxiaowu.com/article/5a105d5e1b60f4043271122e)
+1. 构建速度会变慢
+写在组件的 style 里的样式会先经过vue-loader再走less-loader或者css-loader, 无形中增加了编译时间
+
+2. 在用了 scope 属性后, 生成的 js 文件和 css 文件都会正常臃肿一些
+scope 属性, 其实就是在经过vue-loader编译的时候, 组件模版的对应元素和 css 样式添加一个随机的属性, 
+这样会造成在代码中添加大量类似data-v-33053b70这样的代码上去, 无形中使打包后的文件变大, 组件越多, 越明显
+
+3. scope 属性, 对当前组件不存在的元素不起作用 原因同上条, 这种情况在用了组件库的情况下, 但是需要修改组件库组件样式时, 会经常遇到
+
+4. 在用了 scope 属性后, css 解析效率会变低 css 中, 属性选择器的效率是最低的, 特别是直接用元素选择器的情况下
+style.less 文件是入口文件, 负责引入其他各个子样式文件, 最后由 App.vue 根组件引入, home 文件夹下所有以下划线开头的文件为各个组件的样式,
+如一些 less 配置, 可以放在 _base.less 文件里, 布局样式可以放在 _layout.less 文件里, 其他的一个路由组件一个文件, 再配合现在编辑的分屏功能,
+ 也是一样可以很快定位到相关文件, 甚至一些编辑器, 可以直接从模版中跳到对应的样式文件
+
+ 反对：
+ 暂无 
+
+ ####关于路由懒加载 
+解释：当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
+1结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/lazy-loading 
+区分开发环境和生产环境的话  通过环境变量，分别是用require和import
+副作用：https://github.com/PanJiaChen/vue-element-admin/issues/292
+1（加强版）使用babel 的 plugins babel-plugin-dynamic-import-node 
+2使用require.ensure 不区别开发和生产，基本被1代替      webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中
+这个新的 chunk 会被 webpack 通过 jsonp 来按需加载
+建议使用1的加强版
+
+### 移动端点透事件
+https://segmentfault.com/a/1190000003848737
+https://www.jianshu.com/p/6f85e957a725
+http://www.cnblogs.com/yexiaochai/p/3462657.html
+target.addEventListener(type, listener, useCapture);
+useCapture  可选
+Boolean，是指在DOM树中，注册了该listener的元素，是否会先于它下方的任何事件目标，接收到该事件。
+沿着DOM树向上冒泡的事件不会触发被指定为useCapture（也就是设为true）的listener。
+当一个元素嵌套了另一个元素，两个元素都对同一个事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。
+事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 事件流 及 JavaScript Event order 文档。 如果没有指定， useCapture 默认为 false 。

src/commitDetail.txt

@@ -1,3 +1,4 @@
 ## commit详情
-1 vue项目初始化
-2 css初始化 结构目录创建
+vue项目初始化           32b85057ab3eeaee10446d4727f165c9da1d5f46   
+css初始化 结构目录创建   03d02d43f7825424569c1b1b638255565026ca4e 
+安装依赖 移动端适配 路由懒加载 css书写方案

src/components/common/401.vue

@@ -0,0 +1,12 @@
+(function(doc, win) {
+  let docEl = doc.documentElement
+  let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
+  let recalc = function() {
+    let clientWidth = docEl.clientWidth
+    if (!clientWidth) return
+    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
+  }
+  if (!doc.addEventListener) return
+  win.addEventListener(resizeEvt, recalc, false)
+  doc.addEventListener('DOMContentLoaded', recalc, false)
+})(document, window)

src/components/common/404.vue

@@ -4,8 +4,15 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 
-Vue.config.productionTip = false
+import './config/rem'
+import FastClick from 'fastclick'
+if ('addEventListener' in document) {
+  document.addEventListener('DOMContentLoaded', function() {
+      FastClick.attach(document.body);
+  }, false);
+}
 
+Vue.config.productionTip = false // 生产环境去掉vue的警告信息
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/config/rem.js

@@ -0,0 +1 @@
+module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

src/main.js

@@ -0,0 +1 @@
+module.exports = file => () => import('@/views/' + file + '.vue')

src/router/_import_development.js

@@ -0,0 +1,282 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import {routerMode} from './config/env'
+
+const home = () => import('../page/home/home')
+const city = () => import('../page/city/city')
+const msite = () => import('../page/msite/msite')
+const search = () => import('../page/search/search')
+const shop = () => import('../page/shop/shop')
+const login = () => import('../page/login/login')
+const profile = () => import('../page/profile/profile')
+const forget = () => import('../page/forget/forget')
+const order = () => import('../page/order/order')
+const orderDetail = () => import('../page/order/children/orderDetail')
+const vipCard = () => import('../page/vipcard/vipCard')
+const invoiceRecord = () => import('../page/vipcard/children/invoiceRecord')
+const useCart = () => import('../page/vipcard/children/useCart')
+const vipDescription = () => import('../page/vipcard/children/vipDescription')
+const food = () => import('../page/food/food')
+const confirmOrder = () => import('../page/confirmOrder/confirmOrder')
+const remark = () => import('../page/confirmOrder/children/remark')
+const payment = () => import('../page/confirmOrder/children/payment')
+const userValidation = () => import('../page/confirmOrder/children/userValidation')
+const invoice = () => import('../page/confirmOrder/children/invoice')
+const chooseAddress = () => import('../page/confirmOrder/children/chooseAddress')
+const addAddress = () => import('../page/confirmOrder/children/children/addAddress')
+const searchAddress = () => import('../page/confirmOrder/children/children/children/searchAddress')
+const foodDetail = () => import('../page/shop/children/foodDetail')
+const shopDetail = () => import('../page/shop/children/shopDetail')
+const shopSafe = () => import('../page/shop/children/children/shopSafe')
+const info = () => import('../page/profile/children/info')
+const setUserName = () => import('../page/profile/children/children/setUserName')
+const address = () => import('../page/profile/children/children/address')
+const add = () => import('../page/profile/children/children/children/add')
+const addDetail = () => import('../page/profile/children/children/children/children/addDetail')
+const balance = () => import('../page/balance/balance')
+const balanceDetail = () => import('../page/balance/children/detail')
+const benefit = () => import('../page/benefit/benefit')
+const coupon = () => import('../page/benefit/children/coupon')
+const hbDescription = () => import('../page/benefit/children/hbDescription')
+const hbHistory = () => import('../page/benefit/children/hbHistory')
+const exchange = () => import('../page/benefit/children/exchange')
+const commend = () => import('../page/benefit/children/commend')
+const points = () => import('../page/points/points')
+const pointsDetail = () => import('../page/points/children/detail')
+const service = () => import('../page/service/service')
+const questionDetail = () => import('../page/service/children/questionDetail')
+const find = () => import('../page/find/find')
+const download = () => import('../page/download/download')
+const notFound = () => import('../components/common/404.vue')
+const notAllow = () => import('../components/common/401.vue')
+
+Vue.use(Router)
+
+const router = new Router ({
+  mode: routerMode, // 默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)可选值: "hash" | "history" | "abstract"
+  // hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器
+  // history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式
+  // abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式
+  scrollBehavior (to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      if (from.meta.keepAlive) {
+        from.meta.savedPosition = document.body.scrollTop
+      }
+        return { x: 0, y: to.meta.savedPosition || 0
+      }
+    }
+  },
+  routes: [{
+    path: '/',
+    component: App, // 顶层路由，对应index.html
+    children: [ // 二级路由。对应App.vue
+      // 地址为空时跳转home页面
+      {
+        path: '',
+        redirect: '/home'
+      },
+      // 首页城市列表页
+      {
+        path: '/home',
+        component: home
+      },
+      // 当前选择城市页
+      {
+        path: '/city/:cityid',
+        component: city
+      },
+      // 所有商铺列表页
+      {
+        path: '/msite',
+        component: msite,
+        meta: { keepAlive: true }
+      },
+      // 特色商铺列表页
+      {
+        path: '/food',
+        component: food
+      },
+      // 搜索页
+      {
+        path: '/search/:geohash',
+        component: search
+      },
+      // 商铺详情页
+      {
+        path: '/shop',
+        component: shop,
+        children: [{
+          path: 'foodDetail', // 食品详情页
+          component: foodDetail
+        }, {
+          path: 'shopDetail', // 商铺详情页
+          component: shopDetail,
+          children: [{
+            path: 'shopSafe', // 商铺安全认证页
+            component: shopSafe
+          }]
+        }]
+      },
+      //确认订单页
+      {
+        path: '/confirmOrder',
+        component: confirmOrder,
+        children: [{
+          path: 'remark', // 订单备注
+          component: remark
+        }, {
+          path: 'invoice', // 发票抬头
+          component: invoice
+        }, {
+          path: 'payment', // 付款页面
+          component: payment
+        }, {
+          path: 'userValidation', // 用户验证
+          component: userValidation
+        }, {
+          path: 'chooseAddress', // 选择地址
+          component: chooseAddress,
+          children: [{
+            path: 'addAddress', // 添加地址
+            component: addAddress,
+            children: [{
+              path: 'searchAddress', // 搜索地址
+              component: searchAddress
+            }]
+          }]
+        }]
+      },
+      // 登录注册页
+      {
+        path: '/login',
+        component: login
+      },
+      // 个人信息页
+      {
+        path: '/profile',
+        component: profile,
+        children: [{
+          path: 'info', // 个人信息详情页
+          component: info,
+          children: [{
+            path: 'setUserName',
+            component: setUserName
+          }, {
+            path: 'address',
+            component: address,     // 编辑地址
+            children:[{
+              path:'add',
+              component:add,
+              children:[{
+                path:'addDetail',
+                component:addDetail
+              }]
+            }]
+          }]
+        },
+        {
+          path: 'service', // 服务中心
+          component: service
+        }]
+      },
+      // 修改密码页
+      {
+        path: '/forget',
+        component: forget
+      },
+      // 订单列表页
+      {
+        path: '/order',
+        component: order,
+        children: [{
+          path: 'orderDetail', // 订单详情页
+          component: orderDetail
+        }]
+      },
+      // vip卡页
+      {
+        path: '/vipCard',
+        component: vipCard,
+        children: [{
+          path: 'invoiceRecord', // 开发票
+          component: invoiceRecord
+        }, {
+          path: 'useCart', // 购买会员卡
+          component: useCart
+        }, {
+          path: 'vipDescription', // 会员说明
+          component: vipDescription
+        }]
+      },
+      // 发现页
+      {
+        path: '/find',
+        component: find
+      },
+      // 下载页
+      {
+        path: '/download',
+        component: download
+      },
+      // 服务中心
+      {
+        path: '/service',
+        component: service,
+          children: [{
+            path: 'questionDetail', // 订单详情页
+            component: questionDetail
+        }]
+      },
+      // 余额
+      {
+        path: 'balance',
+        component: balance,
+        children: [{
+          path: 'detail', // 余额说明
+          component: balanceDetail
+        }]
+      },
+      // 我的优惠页
+      {
+        path: 'benefit',
+        component: benefit,
+        children: [{
+          path: 'coupon', // 代金券说明
+          component: coupon
+        }, {
+          path: 'hbDescription', // 红包说明
+          component: hbDescription
+        }, {
+          path: 'hbHistory', // 历史红包
+          component: hbHistory
+        }, {
+          path: 'exchange', // 兑换红包
+          component: exchange
+        }, {
+          path: 'commend', // 推荐有奖
+          component: commend
+        }]
+      },
+      // 我的积分页
+      {
+        path: 'points',
+        component: points,
+        children: [{
+          path: 'detail', // 积分说明
+          component: pointsDetail
+        }]
+      },
+      {
+        path: '401',
+        component: notAllow
+      },
+      {
+        path: '404',
+        component: notFound
+      }
+    ]
+  }]
+})
+export default router