init

.gitignore

@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+jsconfig.json

package.json

@@ -3,13 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "vue-cli-service serve",
+    "serve": "vue-cli-service serve",
     "build": "vue-cli-service build"
   },
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "axios": "^1.1.3",
+    "swiper": "^8.4.4",
+    "v-viewer": "^1.6.4",
+    "vue-infinite-scroll": "^2.0.2",
+    "vue-lazyload": "^1.3.3",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.13",

src/assets/my-reset.css

@@ -0,0 +1,60 @@
+*,
+*::before,
+*::after {
+  /* 阻止safari在用户交互设置一些元素的背景色 */
+  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+}
+
+html {
+  overflow: hidden;
+  touch-action: none;
+  scroll-behavior: smooth; /* MDN: When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.(???) */
+  height: 100%;
+}
+
+body {
+  text-align: justify;
+  height: 100%;
+  overflow: hidden;
+}
+
+a {
+  color: initial;
+  text-decoration: initial;
+  outline: none;
+}
+
+button {
+  padding: 0;
+  cursor: pointer;
+  background-color: initial;
+  border: initial;
+  outline: none;
+  white-space: pre;
+}
+
+img {
+  user-select: none;
+}
+
+menu {
+  list-style-type: initial;
+}
+
+li {
+  display: initial;
+}
+
+input {
+  outline: initial;
+  background: initial;
+  border: initial;
+  border-radius: initial;
+  width: initial;
+  height: initial;
+}
+
+td {
+  vertical-align: inherit;
+}

src/directives/v-click-outside.js

@@ -0,0 +1,28 @@
+export default {
+  install(Vue) {
+    Vue.directive('click-outside', {
+      bind(el, binding) {
+        function documentHandler(e) {
+          if (el.contains(e.target)) {
+            return false
+          }
+          if (binding.expression) {
+            binding.value(e)
+          }
+        }
+        el.__vueClickOutside__ = documentHandler
+        if (binding.modifiers.click) {
+          document.addEventListener('click', documentHandler)
+        }
+        if (binding.modifiers.mousedown) {
+          document.addEventListener('mousedown', documentHandler)
+        }
+      },
+      unbind(el) {
+        document.removeEventListener('click', el.__vueClickOutside__)
+        document.removeEventListener('mousedown', el.__vueClickOutside__)
+        delete el.__vueClickOutside__
+      }
+    })
+  }
+}

src/main.js

@@ -1,13 +1,32 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
+// import UAParser from "@/libs/ua-parser.min.js"
+import clickOutside from "@/directives/v-click-outside.js"
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
+import VueLazyload from 'vue-lazyload'
+import infiniteScroll from 'vue-infinite-scroll'
 
 // 初始样式
 import './assets/base.css'
+import "@/assets/my-reset.css"
 
 Vue.config.productionTip = false
 
+console.log(`version: ${process.env.VUE_APP_VERSION}`)
+
+// const uaParser = new UAParser()
+// const uaInfo = uaParser.getResult()
+
+Vue.use(clickOutside)
+Vue.use(Viewer)
+Vue.use(VueLazyload)
+Vue.use(infiniteScroll)
+
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')

src/store/index.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    test: 0,
+  },
+  getters: {
+  },
+  mutations: {
+    setTest(state) {
+      state.test = 1
+    },
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

vue.config.js

@@ -0,0 +1,25 @@
+const webpack = require('webpack')
+
+process.env.VUE_APP_VERSION = require('./package.json').version
+
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/',
+  // productionSourceMap: process.env.CLI_MODE === 'prod' ? false : true,
+  configureWebpack: {
+    // module: {
+    //   rules: [
+    //   ]
+    // },
+    plugins: [
+      new webpack.ProvidePlugin({
+        // utils: ['/src/utils.js', 'default']
+        globalMapState: ['vuex', 'mapState'],
+        globalMapMutations: ['vuex', 'mapMutations'],
+        globalMapGetters: ['vuex', 'mapGetters'],
+        // globalConfig: ['/src/config.js', 'default'],
+        // globalApi: ['/src/api.js', 'default'],
+        // globalUtils: ['/src/utils.js', 'default'],
+      }),
+    ],
+  },
+}