feat: 更新

.eslintrc.js

@@ -1,14 +1,14 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
   parserOptions: {
-    parser: "babel-eslint"
+    parser: "babel-eslint",
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
-  }
+    "no-console": process.env.VUE_APP_PROXY === 2 ? "warn" : "off",
+    "no-debugger": process.env.VUE_APP_PROXY === 2 ? "warn" : "off",
+  },
 };

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+package-lock.json
 
 # local env files
 .env.local

babel.config.js

@@ -1,3 +1,14 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
+  presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: "vant",
+        libraryDirectory: "es",
+        style: true,
+      },
+      "vant",
+    ],
+  ],
 };

package.json

@@ -10,26 +10,25 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
-    "core-js": "^3.6.4",
+    "vant": "^2.12.36",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.3.0",
-    "@vue/cli-plugin-eslint": "~4.3.0",
-    "@vue/cli-plugin-router": "~4.3.0",
-    "@vue/cli-plugin-vuex": "~4.3.0",
-    "@vue/cli-service": "~4.3.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-import": "^1.13.3",
+    "core-js": "^3.6.4",
     "cross-env": "^7.0.2",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.2.2",
     "postcss-px-to-viewport": "^1.1.1",
     "postcss-write-svg": "^3.0.1",
-    "prettier": "^1.19.1",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.11"

postcss.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    "postcss-write-svg": {
+      utf8: false,
+    },
+    "postcss-px-to-viewport": {
+      viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
+      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
+      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
+      viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw
+      selectorBlackList: [".ignore", ".hairlines"], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
+      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
+      mediaQuery: false, // 允许在媒体查询中转换`px`
+    },
+  },
+};

proxy.config.js

@@ -20,23 +20,23 @@ let proxyTable = {
   "/zuul": {
     target: target,
     changeOrigin: true,
-    secure: false
+    secure: false,
   },
   "/sjht": {
     target: target,
     changeOrigin: true,
-    secure: false
+    secure: false,
   },
   "/media/": {
     target: target,
     changeOrigin: true,
-    secure: false
+    secure: false,
   },
   "/bzdb": {
     target: target,
     changeOrigin: true,
-    secure: false
-  }
+    secure: false,
+  },
 };
 
 module.exports = proxyTable;

src/api/index.js

@@ -5,7 +5,7 @@ import config from "@/config";
 const HOST = config.host("/zuul", "/mrxf");
 
 // 来访总量统计列表
-const petitionReportTotal = param => {
+const petitionReportTotal = (param) => {
   return ajax.post(`${HOST}/petitionReport/total`, param);
 };
 

src/components.js

@@ -0,0 +1,5 @@
+import Vue from "vue";
+
+import { Button } from "vant";
+
+Vue.use(Button);

src/components/HelloWorld.vue

@@ -106,8 +106,8 @@
 export default {
   name: "HelloWorld",
   props: {
-    msg: String
-  }
+    msg: String,
+  },
 };
 </script>
 

src/config/index.js

@@ -20,5 +20,5 @@ module.exports = {
   appName,
   YApi,
   VUE_APP_PROXY,
-  host
+  host,
 };

src/lib/ajax.js

@@ -1,18 +1,18 @@
 import axios from "axios";
 
 // 添加公共请求头
-const getHeader = function(options) {
+const getHeader = function (options) {
   if (options === "form") {
     return Object.assign({
-      "content-type": "application/x-www-form-urlencoded"
+      "content-type": "application/x-www-form-urlencoded",
     });
   } else if (options === "file") {
     return Object.assign({ "content-type": "multipart/form-data" });
   }
 };
 
-const request = function(method, url, params, options) {
-  return new Promise(function(resolve, reject) {
+const request = function (method, url, params, options) {
+  return new Promise(function (resolve, reject) {
     axios
       .request({
         headers: getHeader(options),
@@ -22,13 +22,13 @@ const request = function(method, url, params, options) {
         data: method === "post" ? params : {},
         params: method === "get" ? params : {},
         timeout: 120000,
-        responseType: "json"
+        responseType: "json",
       })
-      .then(function(response) {
+      .then(function (response) {
         let data = response.data || JSON.parse(response.request.responseText);
         resolve(data);
       })
-      .catch(function(error) {
+      .catch(function (error) {
         if (typeof error.response === "undefined") {
           if (
             location.hostname == "127.0.0.1" ||
@@ -46,10 +46,10 @@ const request = function(method, url, params, options) {
 };
 
 export default {
-  get: function(url, params, options) {
+  get: function (url, params, options) {
     return request("get", url, params, options);
   },
-  post: function(url, params, options) {
+  post: function (url, params, options) {
     return request("post", url, params, options);
-  }
+  },
 };

src/lib/tool.js

@@ -6,7 +6,7 @@ const cookieStorage = new CookieStorage();
 const systemCode = config.systemCode;
 
 // 随机长度字符串
-const randomString = len => {
+const randomString = (len) => {
   len = len || 10;
   var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
   var maxPos = chars.length;
@@ -23,24 +23,24 @@ const _setItem = (key, data) => {
 };
 
 // 获取localStorage
-const _getItem = key => {
+const _getItem = (key) => {
   let data = localStorage.getItem(key);
   if (data) data = JSON.parse(data);
   return data;
 };
 
 // 删除localStorage
-const _removeItem = key => {
+const _removeItem = (key) => {
   localStorage.removeItem(key);
 };
 
 // 缓存用户信息
-const setUserInfoCache = info => {
+const setUserInfoCache = (info) => {
   let data = {
     account: info.account,
     avatar: info.avatar,
     userId: info.userId,
-    userName: info.userName
+    userName: info.userName,
   };
   _setItem("__UserInfo__", data);
 };
@@ -57,13 +57,13 @@ const removeUserInfoCache = () => {
 };
 
 // 缓存token
-const setToken = value => {
+const setToken = (value) => {
   let curDate = new Date();
   let nextDate = new Date(curDate.getTime() + 24 * 60 * 60 * 1000);
 
   cookieStorage.setItem("Authorization", value, {
     domain: document.domain,
-    expires: nextDate
+    expires: nextDate,
   });
 };
 
@@ -78,7 +78,7 @@ const removeToken = () => {
 };
 
 // 缓存用户权限
-const setUserPowerCache = arr => {
+const setUserPowerCache = (arr) => {
   let map = {};
   for (let i = 0; i < arr.length; i++) {
     let k = arr[i].powerCode;
@@ -94,7 +94,7 @@ const getUserPowerCache = () => {
 };
 
 // 获取指定的用户权限
-const getUserSomeonePowerCache = code => {
+const getUserSomeonePowerCache = (code) => {
   let data = getUserPowerCache();
   let item = null;
   if (data) item = data[code];
@@ -117,5 +117,5 @@ export {
   setUserPowerCache,
   getUserPowerCache,
   removeUserPowerCache,
-  getUserSomeonePowerCache
+  getUserSomeonePowerCache,
 };

src/main.js

@@ -2,11 +2,12 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import "./components.js";
 
 Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
-  render: h => h(App)
+  render: (h) => h(App),
 }).$mount("#app");

src/router/index.js

@@ -8,7 +8,7 @@ const routes = [
   {
     path: "/",
     name: "Home",
-    component: Home
+    component: Home,
   },
   {
     path: "/about",
@@ -17,12 +17,12 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
-  }
+      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+  },
 ];
 
 const router = new VueRouter({
-  routes
+  routes,
 });
 
 export default router;

src/store/index.js

@@ -7,5 +7,5 @@ export default new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
-  modules: {}
+  modules: {},
 });

src/views/Home.vue

@@ -12,7 +12,7 @@ import HelloWorld from "@/components/HelloWorld.vue";
 export default {
   name: "Home",
   components: {
-    HelloWorld
-  }
+    HelloWorld,
+  },
 };
 </script>

vue.config.js

@@ -1,7 +1,5 @@
 const config = require("./src/config");
 const proxy = require("./proxy.config");
-const pxtoviewport = require("postcss-px-to-viewport");
-const pxtowritesvg = require("postcss-write-svg");
 
 module.exports = {
   publicPath: "./",
@@ -21,30 +19,13 @@ module.exports = {
       title: config.appName,
       // 在这个页面中包含的块，默认情况下会包含
       // 提取出来的通用 chunk 和 vendor chunk。
-            chunks: ["chunk-vendors", "chunk-common", "index"]
-        }
+      chunks: ["chunk-vendors", "chunk-common", "index"],
+    },
   },
   devServer: {
-        proxy: proxy
+    proxy: proxy,
   },
   css: {
-        loaderOptions: {
-            postcss: {
-                plugins: [
-                    pxtowritesvg({
-                        utf8: false
-                    }),
-                    pxtoviewport({
-                        viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
-                        viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
-                        unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
-                        viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw
-                        selectorBlackList: [".ignore", ".hairlines"], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
-                        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
-                        mediaQuery: false // 允许在媒体查询中转换`px`
-                    })
-                ]
-            }
-        }
-    }
+    loaderOptions: {},
+  },
 };