bhabgs develop

meta.js

@@ -44,13 +44,30 @@ module.exports = {
       type: 'string',
       required: false,
       message: 'Project description',
-      default: 'A Vue.js project',
+      default: 'A metaTeam template project.',
     },
     author: {
       when: 'isNotTest',
       type: 'string',
       message: 'Author',
     },
+    platform: {
+      when: 'isNotTest',
+      type: 'list',
+      message: '平台模板',
+      choices: [
+        {
+          name: 'admin-template',
+          value: 'adminTmp',
+          short: 'adminTmp'
+        },
+        {
+          name: 'web-app-template',
+          value: 'webApp',
+          short: 'webApp'
+        }
+      ]
+    },
     build: {
       when: 'isNotTest',
       type: 'list',
@@ -74,6 +91,16 @@ module.exports = {
       type: 'confirm',
       message: 'Install vue-router?',
     },
+    vuex: {
+      when: 'isNotTest',
+      type: 'confirm',
+      message: 'Use vuex ?',
+    },
+    mock: {
+      when: 'isNotTest',
+      type: 'confirm',
+      message: 'Use mock.js ?',
+    },
     lint: {
       when: 'isNotTest',
       type: 'confirm',
@@ -169,6 +196,8 @@ module.exports = {
     'test/unit/specs/index.js': "unit && runner === 'karma'",
     'test/unit/setup.js': "unit && runner === 'jest'",
     'test/e2e/**/*': 'e2e',
+    "src/store/**/*": "vuex",
+    "src/mock/**/*": "mock",
     'src/router/**/*': 'router',
   },
   complete: function(data, { chalk }) {

template/README.md

@@ -33,4 +33,4 @@ npm test
 {{/if_or}}
 ```
 
-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+For a detailed explanation on how things work, check out the [guide](https://github.com/BHABGS/vue-tmp) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

template/build/build.js

@@ -22,7 +22,7 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
     process.stdout.write(stats.toString({
       colors: true,
       modules: false,
-      children: false, // if you are using ts-loader, setting this to true will make typescript errors show up during build
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
       chunks: false,
       chunkModules: false
     }) + '\n\n')

template/config/index.js

@@ -13,7 +13,7 @@ module.exports = {
     proxyTable: {},
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

template/package.json

@@ -26,9 +26,13 @@
   },
   "dependencies": {
     "vue": "^2.5.2"{{#router}},
-    "vue-router": "^3.0.1"{{/router}}
+    "vue-router": "^3.0.1"{{/router}}{{#vuex}},
+    "vuex": "^3.0.1"{{/vuex}}{{#mock}},
+    "mockjs": "^1.0.0"{{/mock}}
   },
   "devDependencies": {
+    "node-sass": "^4.9.3",
+    "sass-loader": "^7.1.0",
     {{#lint}}
     "babel-eslint": "^7.2.3",
     "eslint": "^4.15.0",

template/src/App.vue

@@ -1,34 +1,19 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    {{#router}}
     <router-view/>
-    {{else}}
-    <HelloWorld/>
-    {{/router}}
   </div>
 </template>
 
 <script>
-{{#unless router}}
-import HelloWorld from './components/HelloWorld'
-
-{{/unless}}
 export default {
-  name: 'App'{{#router}}{{else}},
+  name: 'App',
   components: {
-    HelloWorld
-  }{{/router}}
+  }
 }
 </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;
-}
+  #app {
+    
+  }
 </style>

template/src/api/index.js

@@ -0,0 +1,3 @@
+export default {
+
+}

template/src/assets/reset.scss

@@ -0,0 +1,84 @@
+// base reset
+*{
+    font-family: "Microsoft YaHei";
+    padding: 0;
+    margin:0;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-overflow-scrolling: touch;
+    backface-visibility: hidden;
+    user-select: none;
+  }
+  body, html{
+    width: 100%;
+    height: 100%;
+    -webkit-overflow-scrolling: touch;
+    overflow: hidden;
+  }
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  ::-webkit-scrollbar-track  {
+      //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+      background-color:#a2a2a2;
+  }
+  /*定义滑块 内阴影+圆角*/
+  ::-webkit-scrollbar-thumb  {
+    display: none;
+      border-radius: 2px;
+      background-color: #a3a3a3;
+  }
+  textarea {
+    user-select: text !important;
+  }
+
+  input {
+    user-select: text !important;
+  }
+
+//   ::selection {
+//      background:$--color-warning;
+//      color:#fff;
+//   }
+
+  button {
+    outline: none;
+  }
+
+
+// ui 框架reset
+
+// 文字color
+i{
+  list-style: none;
+  font-size: none;
+  &.red{
+    color: red;
+  }
+}
+
+// transition 动画reset 默认添加 .3s 动画
+.animate{
+  transition: all .3s;
+}
+
+// 布局reset
+#app, #layout{
+  height: 100%;
+  overflow: hidden;
+}
+#app {
+  display: flex;
+  justify-content: center;
+  {{#if_eq platform "webApp"}}
+  background-color: #000;
+  {{/if_eq}}
+}
+#layout{
+  {{#if_eq platform "webApp"}}
+  max-width: 540px;
+  background-color: #fff;
+  {{/if_eq}}
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+}

template/src/components/common/headerBox.vue

@@ -0,0 +1,36 @@
+<template>
+    <div id='headerBox'>
+        <div class="name">headerBox</div>
+    </div>
+</template>
+<script>
+    export default {
+        name: 'headerBox',
+        components: {},
+        props: {},
+        data() {
+            return {
+            }
+        },
+        created() {
+        },
+        mounted() {
+        },
+        updata() {
+        },
+        methods: {
+        },
+        filter: {
+        },
+        computed: {
+        },
+        destroyed() {
+        },
+        watch: {
+        }
+    }
+</script>
+<style lang="scss">
+    #headerBox {
+    }
+</style>

template/src/components/index.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+const requireComponent = require.context(
+  '.', true, /\.vue$/
+   //找到components文件夹下以.vue命名的文件
+)
+requireComponent.keys().forEach(fileName => {
+  // fileName = fileName.split('/').pop();
+  const componentConfig = requireComponent(fileName)
+
+  let componentName = capitalizeFirstLetter(
+    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
+  );
+  let trueName = componentName.split('/').pop();
+  Vue.component(trueName, componentConfig.default || componentConfig);
+});

template/src/config/index.js

@@ -0,0 +1,4 @@
+export default {
+    api: '/api/',
+    baseUrl: ''
+}

template/src/config/plugins.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import '@/assets/reset.scss'; // 引入重置css
+import '@/components'; // 引入自动加载组件
+import util from '@/config/util'; // 引入util 工具 
+{{#mock}}
+require('@/mock');
+{{/mock}}
+Vue.prototype.$util = util;

template/src/config/util.js

@@ -0,0 +1 @@
+export default {};

template/src/main.js

@@ -3,10 +3,16 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 {{/if_eq}}
 import Vue from 'vue'
+import '@/config/plugins';
 import App from './App'
 {{#router}}
 import router from './router'
 {{/router}}
+{{#vuex}}  //vuex init
+import Vuex from 'vuex'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+import store from  './store/store'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+Vue.use(Vuex){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
+{{/vuex}}
 
 Vue.config.productionTip = false
 
@@ -16,6 +22,9 @@ new Vue({
   {{#router}}
   router,
   {{/router}}
+  {{#vuex}}
+  store,
+  {{/vuex}}
   {{#if_eq build "runtime"}}
   render: h => h(App)
   {{/if_eq}}

template/src/mock/index.js

@@ -0,0 +1,6 @@
+import Mock from 'mockjs';
+Mock.mock('/api/login', 'get', {
+    data: {},
+    msg: '',
+    code: 200
+});

template/src/router/index.js

@@ -1,15 +1,29 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
-
+const layout = resolve => require(['@/view/layout'], resolve)
+const index = resolve => require(['@/view/index'], resolve)
+const component = {
+  template: '<router-view></router-view>'
+}
+const path = [
+  {
+    path: '/',
+    component: layout,
+    children: [
+      {
+        path: '/',
+        component: index,
+        name: 'index'
+      }
+    ]
+  }
+]
 Vue.use(Router)
-
-export default new Router({
-  routes: [
-    {
-      path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
-    }
-  ]
+const router = new Router({
+  routes: path,
+  mode: 'history',
+  scrollBehavior (to, from, savedPosition) {
+    return { x: 0, y: 0 }
+  }
 })
+export default router

template/src/store/store.js

@@ -0,0 +1,18 @@
+
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+
+Vue.use(Vuex);
+
+
+const store = new Vuex.Store({
+    modules: {
+
+    },
+  //不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。
+    strict: process.env.NODE_ENV !== 'production', //是否开启严格模式
+  });
+
+
+export default store

template/src/view/index.vue

@@ -0,0 +1,36 @@
+<template>
+    <div id='index'>
+        index
+    </div>
+</template>
+<script>
+    export default {
+        name: 'index',
+        components: {},
+        props: {},
+        data() {
+            return {
+            }
+        },
+        created() {
+        },
+        mounted() {
+        },
+        updata() {
+        },
+        methods: {
+        },
+        filter: {
+        },
+        computed: {
+        },
+        destroyed() {
+        },
+        watch: {
+        }
+    }
+</script>
+<style lang="scss">
+    #index {
+    }
+</style>

template/src/view/layout.vue

@@ -0,0 +1,146 @@
+<template>
+    <div id='layout' 
+        {{#if_eq platform "webApp"}}
+            v-on:touchstart="bodyTouchStart" 
+            v-on:touchmove="bodyTouchMove" 
+            v-on:touchend="bodyTouchEnd" {{/if_eq}}>
+            <headerBox class="headerBox" />
+            <div class="bodyBox">
+                <transition :name="direction">
+                    <keep-alive include="home">
+                        <router-view class="appView"></router-view>
+                    </keep-alive>
+                </transition>
+            </div>
+    </div>
+</template>
+<script>
+{{#if_eq platform "webApp"}}
+    var swidth = document.documentElement.clientWidth;{{/if_eq}}
+    export default {
+        name: 'layout',
+        components: {},
+        props: {},
+        data() {
+            return {
+                // direction 页面切换的过渡动画，配合transition组件使用
+                direction: "slide-left"{{#if_eq platform "webApp"}},
+                // touchLeft 划动起点界限，起点在靠近屏幕左侧时才有效
+                touchLeft: swidth*2/5,
+                // touchStartPoint 记录起始点X坐标
+                touchStartPoint: 0,
+                // distance 记录划动的距离
+                distance: 0,
+                // 回退按钮的dom，根据页面上是否存在此dom来判断该路由是否可回退
+                backBtn: null{{/if_eq}}
+            }
+        },
+        created() {
+        },
+        mounted() {
+        },
+        updata() {
+        },
+        methods: {
+            {{#if_eq platform "webApp"}}
+            bodyTouchStart(event) {
+                this.backBtn = document.getElementById("navback");
+                if (this.backBtn) {
+                    // 获得起点X坐标，初始化distance为0
+                    this.touchStartPoint = event.targetTouches[0].pageX;
+                    this.distance = 0;
+                }
+            },
+            bodyTouchMove(event) {
+                if (this.backBtn && this.touchStartPoint < this.touchLeft) {
+                    // 只监听单指划动，多指划动不作响应
+                    if (event.targetTouches.length > 1) {
+                        return;
+                    }
+                    // 实时计算distance
+                    this.distance = event.targetTouches[0].pageX - this.touchStartPoint;
+                    // 根据distance在页面上做出反馈。这里演示通过返回按钮的背景变化作出反馈
+                    if (this.distance > 0 && this.distance < 100) {
+                        this.backBtn.style.backgroundPosition = ((this.distance - 100) / 100) * 50 + "px 0";
+                    } else if (this.distance >= 100) {
+                        this.backBtn.style.backgroundPosition = "0 0";
+                    } else {
+                        this.backBtn.style.backgroundPosition = "-50px 0";
+                    }
+                }
+            },
+            bodyTouchEnd(event) {
+                if (this.backBtn && this.touchStartPoint < this.touchLeft) {
+                    // 划动结束，重置数据
+                    this.touchStartPoint = 0;
+                    this.backBtn.style.backgroundPosition = "-50px 0";
+                    // 当划动距离超过100px时，触发返回事件
+                    if (this.distance > 100) {
+                        // 返回前修改样式，让过渡动画看起来更快
+                        document.getElementById("app").classList.add("quickback");
+                        this.$router.back();
+                        setTimeout(function(){
+                            document.getElementById("app").classList.remove("quickback");
+                        },250)
+                    }
+                }
+            }
+            {{/if_eq}}
+        },
+        filter: {
+        },
+        computed: {
+        },
+        destroyed() {
+        },
+        watch: {
+            $route(to, from) {
+                if (from.name === "login" || from.path.indexOf("home") > -1) {
+                    this.direction = "slide-left";
+                } else if (to.path.indexOf("home") > -1) {
+                    this.direction = "slide-right";
+                } else {
+                    const toDepth = to.path.split("/").length;
+                    const fromDepth = from.path.split("/").length;
+                    this.direction = toDepth < fromDepth ? "slide-right" : "slide-left";
+                }
+            }
+        }
+    }
+</script>
+<style lang="scss">
+    #layout {
+        height: 100%;
+        overflow: hidden;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        .headerBox{
+        }
+        .bodyBox{
+            flex: 1;
+        }
+        .appView {
+            position: absolute;
+            width: 100%;
+            background: #fff;
+            min-height: 100vh;
+            transition: transform 0.24s ease-out;
+        }
+        #app.quickback .appView{
+            transition-duration: 0.1s;
+        }
+        .slide-left-enter {
+            transform: translate(100%, 0);
+        }
+        .slide-left-leave-active {
+            transform: translate(-50%, 0);
+        }
+        .slide-right-enter {
+            transform: translate(-50%, 0);
+        }
+        .slide-right-leave-active {
+            transform: translate(100%, 0);
+        }
+    }
+</style>

template/test/unit/jest.conf.js

@@ -19,7 +19,7 @@ module.exports = {
   ],{{/e2e}}
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   setupFiles: ['<rootDir>/test/unit/setup'],
-  mapCoverage: true,
+  // mapCoverage: true,
   coverageDirectory: '<rootDir>/test/unit/coverage',
   collectCoverageFrom: [
     'src/**/*.{js,vue}',