框架搭建

chenning111 · Oct 28, 2020 · 9fc5518 · 9fc5518
1 parent e0af06a
commit 9fc5518
Show file tree

Hide file tree

Showing 20 changed files with 13,178 additions and 2 deletions.
diff --git a/.env.development b/.env.development
@@ -0,0 +1,6 @@
+# just a flag
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = 'http://101.37.162.245:8999'
+
diff --git a/.env.production b/.env.production
@@ -0,0 +1,8 @@
+# just a flag
+ENV = 'production'
+
+# base api
+#VUE_APP_BASE_API = 'http://101.37.162.245:8999'
+VUE_APP_BASE_API = 'http://112.124.14.243:8999'
+
+
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,13 @@
+.DS_Store
+node_modules/
+dist/
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+
diff --git a/README.md b/README.md
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+  plugins: [
+    [
+      'import',
+      { libraryName: 'vant', libraryDirectory: 'es', style: true },
+      'vant'
+    ]
+  ]
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "vant-demo",
+  "version": "1.0.0",
+  "description": "Collection of vant demos.",
+  "author": "neverland <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "amfe-flexible": "^2.2.1",
+    "core-js": "^3.4.3",
+    "vant": "^2.2.0",
+    "vue": "^2.6.10",
+    "vue-i18n": "^8.22.1",
+    "vue-navigation": "^1.1.4",
+    "vue-router": "^3.0.6",
+    "vuex": "^3.5.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.1.1",
+    "@vue/cli-plugin-eslint": "^4.1.1",
+    "@vue/cli-service": "^4.1.1",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-import": "^1.12.0",
+    "eslint": "^4.19.1",
+    "eslint-plugin-vue": "^6.0.1",
+    "fastclick": "^1.0.6",
+    "less": "^3.8.1",
+    "less-loader": "^5.0.0",
+    "postcss-pxtorem": "^4.0.1",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "no-console": "off"
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "Android >= 4.0",
+    "iOS >= 7"
+  ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>vant-demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,48 @@
+<template>
+  <div id="app">
+    <transition :name="transitionName">
+      <navigation>
+        <router-view class="router" />
+      </navigation>
+    </transition>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      transitionName: 'van-slide-right'
+    }
+  },
+  created() {
+    this.$navigation.on('forward', () => {
+      this.transitionName = 'van-slide-right'
+    })
+    this.$navigation.on('back', () => {
+      this.transitionName = 'van-slide-left'
+    })
+    
+  }
+}
+</script>
+
+<style lang="less">
+#app {
+  height: 100vh;
+  font-family: PingFangSC-Regular;
+  background-color: #f1f3f5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  touch-action: none;
+}
+
+/** 解决路由切换动画上下闪动问题 */
+.router {
+  position: absolute;
+  top: safe-area-inset-top;
+  top: env(safe-area-inset-top);
+  width: 100%;
+  transition: all 0.377s ease;
+  backface-visibility: hidden;
+}
+</style>
diff --git a/src/lang/en_us.js b/src/lang/en_us.js
@@ -0,0 +1,5 @@
+export default {
+  app: {
+    hello: 'Hello，World!'
+  }
+}
diff --git a/src/lang/index.js b/src/lang/index.js
@@ -0,0 +1,38 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import { Locale } from 'vant'
+import enUS from 'vant/lib/locale/lang/en-US'
+import zhCN from 'vant/lib/locale/lang/zh-CN'
+import enLocale from './en_us'
+import zhLocale from './zh_cn'
+
+Vue.use(VueI18n)
+
+const messages = {
+  en: {
+    ...enUS,
+    ...enLocale
+  },
+  zh: {
+    ...zhCN,
+    ...zhLocale
+  }
+}
+
+const i18n = new VueI18n({
+  // 设置默认语言
+  locale: 'en', 
+  // 设置资源文件对象
+  messages: messages 
+})
+
+// 更新vant组件库本身的语言变化，支持国际化
+function vantLocales(lang) {
+  if (lang === 'en') {
+    Locale.use(lang, enUS)
+  } else if (lang === 'zh') {
+    Locale.use(lang, zhCN)
+  }
+}
+
+export { i18n, vantLocales }
diff --git a/src/lang/zh_cn.js b/src/lang/zh_cn.js
@@ -0,0 +1,5 @@
+export default {
+  app: {
+    hello: '你好，世界！'
+  }
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,29 @@
+import Vue from 'vue';
+import App from './App';
+import 'amfe-flexible';
+import { router } from './router';
+import store from './store'
+// 用于控制浏览器前进后退 使用keep-alive
+import Navigation from 'vue-navigation'
+
+import FastClick from 'fastclick'
+// 导入资源文件
+import { i18n, vantLocales } from './lang'
+
+// vant-ui组件国际化
+vantLocales(i18n.locale)
+// 处理点击事件延迟300ms问题
+FastClick.attach(document.body)
+// 用于控制浏览器前进后退缓存
+Vue.use(Navigation, {
+  router,
+  store
+})
+new Vue({
+  store,
+  i18n,
+  router,
+  el: '#app',
+  render: h => h(App)
+});
+
diff --git a/src/router.js b/src/router.js
@@ -0,0 +1,51 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+Vue.use(Router);
+
+const routes = [
+  {
+    path: '*',
+    redirect: '/goods'
+  },
+  {
+    name: 'user',
+    component: () => import('./view/user'),
+    meta: {
+      title: '会员中心'
+    }
+  },
+  {
+    name: 'cart',
+    component: () => import('./view/cart'),
+    meta: {
+      title: '购物车'
+    }
+  },
+  {
+    name: 'goods',
+    component: () => import('./view/goods'),
+    meta: {
+      title: '商品详情'
+    }
+  }
+];
+
+// add route path
+routes.forEach(route => {
+  route.path = route.path || '/' + (route.name || '');
+});
+
+const router = new Router({ routes });
+
+router.beforeEach((to, from, next) => {
+  const title = to.meta && to.meta.title;
+  if (title) {
+    document.title = title;
+  }
+  next();
+});
+
+export {
+  router
+};
diff --git a/src/store/index.js b/src/store/index.js
@@ -0,0 +1,14 @@
+
+
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {},
+  mutations: {},
+  getters: {},
+  actions: {},
+  modules: {}
+})