feats

.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.editorconfig

@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.env.development

@@ -0,0 +1,4 @@
+NODE_ENV='development'
+# must start with VUE_APP_ 
+VUE_APP_ENV = 'development'
+ 

.env.production

@@ -0,0 +1,4 @@
+NODE_ENV='production'
+# must start with VUE_APP_
+VUE_APP_ENV = 'production'
+ 

.env.staging

@@ -0,0 +1,4 @@
+NODE_ENV='production'
+# must start with VUE_APP_
+VUE_APP_ENV = 'staging'
+ 

.eslintignore

@@ -0,0 +1,5 @@
+build/*.js
+src/assets
+src/config
+public
+dist

.eslintrc.js

@@ -0,0 +1,261 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ['plugin:vue/essential', 'eslint:recommended'],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'vue/max-attributes-per-line': [
+      2,
+      {
+        singleline: 10,
+        multiline: {
+          max: 1,
+          allowFirstLine: false
+        }
+      }
+    ],
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/name-property-casing': ['error', 'PascalCase'],
+    'vue/no-v-html': 'off',
+    'accessor-pairs': 2,
+    'arrow-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
+    'block-spacing': [2, 'always'],
+    'brace-style': [
+      2,
+      '1tbs',
+      {
+        allowSingleLine: true
+      }
+    ],
+    camelcase: [
+      0,
+      {
+        properties: 'always'
+      }
+    ],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    curly: [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
+    'generator-star-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
+    'handle-callback-err': [2, '^(err|error)$'],
+    indent: [
+      2,
+      2,
+      {
+        SwitchCase: 1
+      }
+    ],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [
+      2,
+      {
+        beforeColon: false,
+        afterColon: true
+      }
+    ],
+    'keyword-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
+    'new-cap': [
+      2,
+      {
+        newIsCap: true,
+        capIsNew: false
+      }
+    ],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [
+      2,
+      {
+        allowLoop: false,
+        allowSwitch: false
+      }
+    ],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [
+      2,
+      {
+        max: 1
+      }
+    ],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [
+      2,
+      {
+        defaultAssignment: false
+      }
+    ],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [
+      2,
+      {
+        vars: 'all',
+        args: 'none'
+      }
+    ],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [
+      2,
+      {
+        initialized: 'never'
+      }
+    ],
+    'operator-linebreak': [
+      2,
+      'after',
+      {
+        overrides: {
+          '?': 'before',
+          ':': 'before'
+        }
+      }
+    ],
+    'padded-blocks': [2, 'never'],
+    quotes: [
+      2,
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true
+      }
+    ],
+    semi: [2, 'never'],
+    'semi-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [
+      2,
+      {
+        words: true,
+        nonwords: false
+      }
+    ],
+    'spaced-comment': [
+      2,
+      'always',
+      {
+        markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+      }
+    ],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    yoda: [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [
+      2,
+      'always',
+      {
+        objectsInObjects: false
+      }
+    ],
+    'array-bracket-spacing': [2, 'never']
+  }
+}

.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+/docs
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+package-lock.json
+yarn.lock

.postcssrc.js

@@ -0,0 +1,13 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+module.exports = {
+  plugins: {
+    autoprefixer: {
+      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
+    },
+    'postcss-pxtorem': {
+      rootValue: 37.5,
+      propList: ['*'],
+      //selectorBlackList: ['van-']
+    }
+  }
+}

.prettierrc

@@ -0,0 +1,24 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "semi": false,
+  "wrap_line_length": 120,
+  "wrap_attributes": "auto",
+  "proseWrap": "always",
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "useTabs": false,
+  "eslintIntegration":true,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ],
+  "endOfLine": "auto"
+}

README.en.md

@@ -0,0 +1,45 @@
+# vue-h5-template
+
+基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架
+
+#### 介绍
+[关于项目介绍](https://segmentfault.com/a/1190000019275330)
+
+ 1. vuecli3.0      
+ 2. 多环境开发       
+ 3. axios封装         
+ 4. rem适配方案        
+ 5. 生产环境cdn优化首屏加速
+ 6. babel低版本浏览器兼容
+ 7. 环境发布脚本
+
+#### 多环境
+
+
+之前写过一个多环境的方案，是基于vue-cli2.0的  [vue多环境配置方案-传送门](https://segmentfault.com/a/1190000019136606)
+最近新的项目采用了vuecli3.0开始了一番折腾
+
+这里参考了[vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)  基本思路不变
+在src的文件里新建config 根据不同的环境去引用不同的配置文件，不同的是在根目录下有三个设置环境变量的文件
+这里可以参考vue-admin-template
+
+#### rem适配方案
+
+还是那句话，用vw还是用rem，这是个问题？
+
+选用rem的原因是因为vant直接给到了这个适配方案，个人也比较喜欢这个方案
+
+[vant](https://youzan.github.io/vant/#/zh-CN/quickstart)  
+ 
+ #### 总结
+
+因为项目刚刚构建起来，后面还会持续更新，实际使用过程中一定还有很多问题，如果文章中有错误希望能够被指正，一起成长
+
+# 关于我
+
+您可以扫描添加下方的微信并备注 Soul 加交流群，给我提意见，交流学习。
+<p>
+  <img src="https://tweapp.top1buyer.com/mine.jpg" width="256" style="display:inline;">
+</p>
+ 
+如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～

babel.config.js

@@ -0,0 +1,22 @@
+// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
+const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
+const plugins = [
+  [
+    'import',
+    {
+      libraryName: 'vant',
+      libraryDirectory: 'es',
+      style: true
+    },
+    'vant'
+  ]
+]
+// 去除 console.log
+if (IS_PROD) {
+  plugins.push('transform-remove-console')
+}
+
+module.exports = {
+  presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
+  plugins
+}

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "vue-h5-template",
+  "version": "2.1.0",
+  "description": "A vue h5 template with Vant UI",
+  "author": "Sunnie <sunniejs@163.com>",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --open",
+    "build": "vue-cli-service build",
+    "stage": "vue-cli-service build --mode staging",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "animate.css": "^4.1.1",
+    "core-js": "^3.6.4",
+    "lib-flexible": "^0.3.2",
+    "lodash": "^4.17.15",
+    "regenerator-runtime": "^0.13.5",
+    "swiper": "6.8.4",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-import": "^1.13.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.14.1",
+    "postcss-pxtorem": "^5.1.1",
+    "sass-loader": "^8.0.2",
+    "script-ext-html-webpack-plugin": "^2.1.4",
+    "vue-template-compiler": "^2.6.11",
+    "webpack-bundle-analyzer": "^3.8.0"
+  }
+}

public/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <!-- <% for (var i in
+      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
+      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
+      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
+	  <% } %> -->
+    <title><%= webpackConfig.name %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
+    <!-- <% for (var i in
+      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
+      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    <% } %> -->
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+<script>
+export default {
+  name: 'App'
+}
+</script>
+<style lang="scss"></style>

src/assets/css/index.scss

@@ -0,0 +1,12 @@
+@import './variables.scss';
+@import './mixin.scss';
+
+html,
+body, #app {
+  color: #333333;
+  font-family: Arial, Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, sans-serif;
+  background-color: $background-color;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}

src/assets/css/mixin.scss

@@ -0,0 +1,36 @@
+// mixin
+// 清除浮动
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+ 
+// 多行隐藏
+@mixin textoverflow($clamp:1) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $clamp;
+  /*! autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+
+//flex box
+@mixin flexbox($jc:space-between, $ai:center, $fd:row, $fw:nowrap) {
+  display: flex;
+  display: -webkit-flex;
+  flex: 1;
+  justify-content: $jc;
+  -webkit-justify-content: $jc;
+  align-items: $ai;
+  -webkit-align-items: $ai;
+  flex-direction: $fd;
+  -webkit-flex-direction: $fd;
+  flex-wrap: $fw;
+  -webkit-flex-wrap: $fw;
+}

src/assets/css/variables.scss

@@ -0,0 +1,3 @@
+ 
+// variables
+$background-color: #f8f8f8;

src/components/Swiper/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Swiper from 'swiper'
+
+export default {
+  name: 'Swiper',
+  props: {
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      swiper: undefined
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.swiper = new Swiper(this.$el, this.options)
+    })
+  }
+}
+</script>
+
+<style>
+.swiper-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/SwiperSlide/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="swiper-slide">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SwiperSlide'
+}
+</script>
+
+<style>
+.swiper-slide {
+  text-align: center;
+  background: #fff;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+</style>

src/config/env.development.js

@@ -0,0 +1,9 @@
+// 本地环境配置
+module.exports = {
+  title: 'vue-h5-template',
+  baseUrl: 'http://localhost:9018', // 项目地址
+  baseApi: 'https://test.xxx.com/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
+  APPID: 'xxx',
+  APPSECRET: 'xxx',
+  $cdn: 'https://www.sunniejs.cn/static'
+}

src/config/env.production.js

@@ -0,0 +1,9 @@
+// 正式
+module.exports = {
+  title: 'vue-h5-template',
+  baseUrl: 'https://www.xxx.com/', // 正式项目地址
+  baseApi: 'https://www.xxx.com/api', // 正式api请求地址
+  APPID: 'xxx',
+  APPSECRET: 'xxx',
+  $cdn: 'https://www.sunniejs.cn/static'
+}

src/config/env.staging.js

@@ -0,0 +1,8 @@
+module.exports = {
+  title: 'vue-h5-template',
+  baseUrl: 'https://test.xxx.com', // 测试项目地址
+  baseApi: 'https://test.xxx.com/api', // 测试api请求地址
+  APPID: 'xxx',
+  APPSECRET: 'xxx',
+  $cdn: 'https://www.sunniejs.cn/static'
+}

src/config/index.js

@@ -0,0 +1,4 @@
+// 根据环境引入不同配置 process.env.VUE_APP_ENV
+const environment = process.env.VUE_APP_ENV || 'production'
+const config = require('./env.' + environment)
+module.exports = config

src/filters/filter.js

@@ -0,0 +1,37 @@
+/**
+ *格式化时间
+ *yyyy-MM-dd hh:mm:ss
+ */
+export function formatDate(time, fmt) {
+  if (time === undefined || '') {
+    return
+  }
+  const date = new Date(time)
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  const o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  }
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      const str = o[k] + ''
+      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
+    }
+  }
+  return fmt
+}
+
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length)
+}
+/*
+ * 隐藏用户手机号中间四位
+ */
+export function hidePhone(phone) {
+  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+}

src/filters/index.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import * as filter from './filter'
+
+Object.keys(filter).forEach(k => Vue.filter(k, filter[k]))
+
+Vue.prototype.$formatDate = Vue.filter('formatDate')
+Vue.prototype.$hidePhone = Vue.filter('hidePhone')

src/layouts/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+
+export default {
+  name: 'AppLayout',
+  data() {
+    return {}
+  }
+}
+</script>

src/main.js

@@ -0,0 +1,34 @@
+// 兼容 IE
+// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
+import Vue from 'vue'
+import Swiper from '@/components/Swiper'
+import SwiperSlide from '@/components/SwiperSlide'
+import App from './App.vue'
+import router from './router'
+
+// 设置 js中可以访问 $cdn
+import { $cdn } from '@/config'
+Vue.prototype.$cdn = $cdn
+
+// 引入全局样式
+import 'animate.css'
+import 'swiper/swiper-bundle.css'
+import '@/assets/css/index.scss'
+// 移动端适配
+import 'lib-flexible/flexible.js'
+
+// filters
+import './filters'
+Vue.config.productionTip = false
+
+Vue.component('swiper', Swiper)
+Vue.component('swiper-slide', SwiperSlide)
+
+new Vue({
+  el: '#app',
+  router,
+  render: h => h(App)
+})

src/router/index.js

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import { constantRouterMap } from './router.config.js'
+
+// hack router push callback
+const originalPush = Router.prototype.push
+Router.prototype.push = function push(location, onResolve, onReject) {
+  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
+  return originalPush.call(this, location).catch(err => err)
+}
+
+Vue.use(Router)
+
+const createRouter = () =>
+  new Router({
+    // mode: 'history', // 如果你是 history模式 需要配置vue.config.js publicPath
+    // base: process.env.BASE_URL,
+    scrollBehavior: () => ({ y: 0 }),
+    routes: constantRouterMap
+  })
+
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
+export default router

src/router/router.config.js

@@ -0,0 +1,29 @@
+/**
+ * 基础路由
+ * @type { *[] }
+ */
+export const constantRouterMap = [
+  {
+    path: '/',
+    component: () => import('@/layouts/index'),
+    redirect: '/index',
+    meta: {
+      title: '首页',
+      keepAlive: false
+    },
+    children: [
+      {
+        path: '/index',
+        name: 'Index',
+        component: () => import('@/views/index'),
+        meta: { title: '首页', keepAlive: false }
+      },
+      {
+        path: '/apartment',
+        name: 'Apartment',
+        component: () => import('@/views/apartment'),
+        meta: { title: '公寓', keepAlive: false }
+      }
+    ]
+  }
+]

src/utils/index.js

@@ -0,0 +1,110 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * Parse the time to string
+ * @param {(Object|string|number)} time
+ * @param {string} cFormat
+ * @returns {string}
+ */
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
+    }
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+
+/**
+ * @param {number} time
+ * @param {string} option
+ * @returns {string}
+ */
+export function formatTime(time, option) {
+  if (('' + time).length === 10) {
+    time = parseInt(time) * 1000
+  } else {
+    time = +time
+  }
+  const d = new Date(time)
+  const now = Date.now()
+
+  const diff = (now - d) / 1000
+
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) {
+    // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  if (option) {
+    return parseTime(time, option)
+  } else {
+    return (
+      d.getMonth() +
+      1 +
+      '月' +
+      d.getDate() +
+      '日' +
+      d.getHours() +
+      '时' +
+      d.getMinutes() +
+      '分'
+    )
+  }
+}
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function param2Obj(url) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"')
+        .replace(/\+/g, ' ') +
+      '"}'
+  )
+}

src/utils/validate.js

@@ -0,0 +1,20 @@
+/**
+ * Created by Sunnie on 19/06/04.
+ */
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}

src/views/apartment.vue

@@ -0,0 +1,84 @@
+<!-- home -->
+<template>
+  <swiper>
+    <swiper-slide v-for="item in list" :key="item.image">
+      <pure-image :bg-color="item.color" :bg-image="item.image"></pure-image>
+    </swiper-slide>
+  </swiper>
+</template>
+
+<script>
+
+export default {
+  components: {
+    PureImage: () => import('./components/PureImage.vue')
+  },
+  data() {
+    return {
+      list: [
+        {
+          image: require('@/assets/images/apartment/1.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/2-2.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/3-1.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/4-1.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/5-1.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/6-1.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-1.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-2.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-3.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-4.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-5.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-6.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-7.jpg'),
+          color: '#f0f0f0'
+        },
+        {
+          image: require('@/assets/images/apartment/7-8.jpg'),
+          color: '#f0f0f0'
+        }
+      ]
+    }
+  },
+
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/components/IndexImage.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="index-image">
+    <img :src="image" class="bg-image" @load="loadBg" />
+    <div class="index-inner-swiper" :style="swiperItemStyle">
+      <swiper v-if="showSwiper">
+        <swiper-slide class="index-inner-slide">
+          <img :src="btn1" alt="" @click="$router.push({ name: 'Apartment' })">
+        </swiper-slide>
+        <swiper-slide class="index-inner-slide">
+          <img :src="btn2" alt="" @click="$router.push({ name: 'Office' })">
+        </swiper-slide>
+      </swiper>
+    </div>
+    <div class="index-pos-hander" :style="handerStyle">
+      <img :src="hander" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'IndexImage',
+  data() {
+    return {
+      image: require('@/assets/images/index.png'),
+      btn1: require('@/assets/images/按钮-1.png'),
+      btn2: require('@/assets/images/按钮-2.png'),
+      hander: require('@/assets/images/toLeft.png'),
+      showSwiper: false,
+      swiperItemStyle: {},
+      handerStyle: {}
+    }
+  },
+  methods: {
+    loadBg(e) {
+      const { offsetTop, width, height, naturalWidth, naturalHeight } = e.target
+
+      const widthRatio = width / naturalWidth
+      const heightRatio = height / naturalHeight
+
+      this.swiperItemStyle = {
+        width: `${636 * widthRatio}px`, // 636 是图片原始宽度
+        height: `${637 * heightRatio}px`, // 637 是图片原始高度
+        top: `${offsetTop + 1612 * heightRatio}px`,
+        left: `${352 * widthRatio}px`
+      }
+
+      this.handerStyle = {
+        top: `${offsetTop + 1800 * heightRatio}px`,
+        left: `${988 * widthRatio}px`
+      }
+
+      this.showSwiper = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.index-image {
+  position: relative;
+  background-color: #1d429d;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  .bg-image {
+    width: 100%;
+    pointer-events: none;
+    z-index: 100;
+  }
+
+  .index-inner-swiper {
+    position: absolute;
+
+    .index-inner-slide {
+      background: transparent;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .index-pos-hander {
+    position: absolute;
+    z-index: 200;
+    width: 64px;
+    height: 56px;
+    animation: leftfade 2s infinite;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @keyframes leftfade {
+    0% {
+      opacity: 0;
+      transform: translateX(0);
+    }
+    70% {
+      opacity: 1;
+      transform: translateX(-30%);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(-30%);
+    }
+  }
+}
+</style>

src/views/components/PureImage.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="pure-image" :style="custStyle">
+    <p></p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PureImage',
+  props: {
+    bgColor: {
+      type: String,
+      default: '#f0f0f0'
+    },
+    bgImage: String
+  },
+  computed: {
+    custStyle() {
+      return {
+        backgroundColor: this.bgColor,
+        backgroundImage: `url('${this.bgImage}')`
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pure-image {
+  background-position: center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <index-image></index-image>
+</template>
+
+<script>
+export default {
+  components: {
+    IndexImage: () => import('./components/IndexImage.vue')
+  }
+}
+</script>

src/views/office.vue

@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>

vue.config.js

@@ -0,0 +1,180 @@
+'use strict'
+const path = require('path')
+const defaultSettings = require('./src/config/index.js')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+const resolve = dir => path.join(__dirname, dir)
+// page title
+const name = defaultSettings.title || 'vue mobile template'
+// 生产环境，测试和正式
+const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
+// externals
+// const externals = {
+//   vue: 'Vue',
+//   'vue-router': 'VueRouter',
+//   vuex: 'Vuex',
+//   vant: 'vant',
+//   axios: 'axios'
+// }
+// CDN外链，会插入到index.html中
+// const cdn = {
+//   // 开发环境
+//   dev: {
+//     css: [],
+//     js: []
+//   },
+//   // 生产环境
+//   build: {
+//     css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
+//     js: [
+//       'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
+//       'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
+//       'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
+//       'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
+//       'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
+//     ]
+//   }
+// }
+
+module.exports = {
+  publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
+  //  publicPath: '/app/', //署应用包时的基本 URL。  vue-router history模式使用
+  outputDir: 'dist', //  生产环境构建文件的目录
+  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
+  lintOnSave: !IS_PROD,
+  productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
+  devServer: {
+    port: 9020, // 端口
+    open: false, // 启动后打开浏览器
+    overlay: {
+      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
+      warnings: false,
+      errors: true
+    }
+    // proxy: {
+    //   //配置跨域
+    //   '/api': {
+    //       target: "https://test.xxx.com",
+    //       // ws:true,
+    //       changOrigin:true,
+    //       pathRewrite:{
+    //           '^/api':'/'
+    //       }
+    //   }
+    // }
+  },
+  css: {
+    extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
+    sourceMap: false,
+    loaderOptions: {
+      scss: {
+        // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
+        // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
+        prependData: `
+          @import "assets/css/mixin.scss";
+          @import "assets/css/variables.scss";
+          $cdn: "${defaultSettings.$cdn}";
+          `
+      }
+    }
+  },
+  configureWebpack: config => {
+    config.name = name
+
+    // 为生产环境修改配置...
+    // if (IS_PROD) {
+    //   // externals
+    //   config.externals = externals
+    // }
+  },
+
+  chainWebpack: config => {
+    config.plugins.delete('preload') // TODO: need test
+    config.plugins.delete('prefetch') // TODO: need test
+
+    // 别名 alias
+    config.resolve.alias
+      .set('@', resolve('src'))
+      .set('assets', resolve('src/assets'))
+      .set('api', resolve('src/api'))
+      .set('views', resolve('src/views'))
+      .set('layouts', resolve('src/layouts'))
+      .set('components', resolve('src/components'))
+
+    /**
+     * 添加CDN参数到htmlWebpackPlugin配置中
+     */
+    // config.plugin('html').tap(args => {
+    //   if (IS_PROD) {
+    //     args[0].cdn = cdn.build
+    //   } else {
+    //     args[0].cdn = cdn.dev
+    //   }
+    //   return args
+    //  })
+
+    /**
+     * 设置保留空格
+     */
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .loader('vue-loader')
+      .tap(options => {
+        options.compilerOptions.preserveWhitespace = true
+        return options
+      })
+      .end()
+    /**
+     * 打包分析
+     */
+    if (IS_PROD) {
+      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
+        {
+          analyzerMode: 'static'
+        }
+      ])
+    }
+    config
+      // https://webpack.js.org/configuration/devtool/#development
+      .when(!IS_PROD, config => config.devtool('cheap-source-map'))
+
+    config.when(IS_PROD, config => {
+      config
+        .plugin('ScriptExtHtmlWebpackPlugin')
+        .after('html')
+        .use('script-ext-html-webpack-plugin', [
+          {
+            // 将 runtime 作为内联引入不单独存在
+            inline: /runtime\..*\.js$/
+          }
+        ])
+        .end()
+      config.optimization.splitChunks({
+        chunks: 'all',
+        cacheGroups: {
+          // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
+          commons: {
+            name: 'chunk-commons',
+            test: resolve('src/components'),
+            minChunks: 3, //  被至少用三次以上打包分离
+            priority: 5, // 优先级
+            reuseExistingChunk: true // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
+          },
+          node_vendors: {
+            name: 'chunk-libs',
+            chunks: 'initial', // 只打包初始时依赖的第三方
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10
+          },
+          vantUI: {
+            name: 'chunk-vantUI', // 单独将 vantUI 拆包
+            priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
+            test: /[\\/]node_modules[\\/]_?vant(.*)/
+          }
+        }
+      })
+      config.optimization.runtimeChunk('single')
+    })
+  }
+}