How to use Vue to develop public account web pages

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue create water_project

.
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.vue
│ ├── api
│ ├── assets
│ ├── components
│ ├── global.less
│ ├── main.js
│ ├── mock
│ ├── router
│ ├── store
│ ├── utils
│ └── views
└── vue.config.js

npm i amfe-flexible -S

npm i postcss-pxtorem -D

import "amfe-flexible"

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ["*"],
          }),
        ],
      },
  },

npm i normalize.css -S

import "normalize.css"

npm i vant -S

# Install the plugin npm i babel-plugin-import -D
// Add configuration in .babelrc // Note: webpack 1 does not need to set libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// For users using babel7, you can configure module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// Then you can directly import the Vant component in the code // The plugin will automatically convert the code into the on-demand import form in method 2 import { Button } from 'vant';

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        //Specify the style path style: (name) => `${name}/style/less`,
      },
      'vant',
    ],
  ],
};

// Import all styles import 'vant/lib/index.less';

// Import a single component style import 'vant/lib/button/style/less';

// webpack.config.js
module.exports = {
  rules:
    {
      test: /\.less$/,
      use: [
        // ...other loader configuration {
          loader: 'less-loader',
          options:
            // If the less-loader version is less than 6.0, please remove the lessOptions level and configure the options directly.
            lessOptions: {
              modifyVars: {
                // Directly overwrite the variable 'text-color': '#111',
                'border-color': '#eee',
                // Or you can overwrite it through a less file (the file path is an absolute path)
                hack: `true; @import "your-less-file-path.less";`,
              },
            },
          },
        },
      ],
    },
  ],
};

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // If the less-loader version is less than 6.0, please remove the lessOptions level and configure the options directly.
        lessOptions: {
          modifyVars: {
            // Directly overwrite the variable 'text-color': '#111',
            'border-color': '#eee',
            // Or you can overwrite it through a less file (the file path is an absolute path)
            hack: `true; @import "your-less-file-path.less";`,
          },
        },
      },
    },
  },
};

 <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

npm i weixin-js-sdk -S

import wx from "weixin-js-sdk"

//Hang on the prototype of vue for easy use Vue.prototype.$wx = wx;

 this.$wx.config({
          debug: false, // Turn on the debug mode, the return values ​​of all API calls will be alerted on the client side. If you want to view the incoming parameters, you can open it on the PC side. The parameter information will be printed through the log, which will only be printed on the PC side.
          appId: res.data.appId, // Required, unique identifier of the public account timestamp: String(res.data.timestamp), // Required, timestamp for generating signature nonceStr: String(res.data.nonceStr), // Required, random string for generating signature signature: res.data.signature, // Required, signature, see Appendix 1
          jsApiList: [
            "getNetworkType",
            "getLocation",
          ], // Required, list of JS interfaces to be used, see Appendix 2 for a list of all JS interfaces
        });

async getWxJssdkConf() {
      const res = await this.$api.getSdkConfig({
        url: window.location.href.split("#")[0],
      });
      if (res.success) {
        this.$wx.config({
          debug: false, // Turn on the debug mode, the return values ​​of all API calls will be alerted on the client side. If you want to view the incoming parameters, you can open it on the PC side. The parameter information will be printed through the log, which will only be printed on the PC side.
          appId: res.data.appId, // Required, unique identifier of the public account timestamp: String(res.data.timestamp), // Required, timestamp for generating signature nonceStr: String(res.data.nonceStr), // Required, random string for generating signature signature: res.data.signature, // Required, signature, see Appendix 1
          jsApiList: [
            "getNetworkType",
            "getLocation",
          ], // Required, list of JS interfaces to be used, see Appendix 2 for a list of all JS interfaces
        });
        this.$wx.ready(() => {
          this.$wx.checkJsApi({
            jsApiList: ["getNetworkType", "getLocation"], // List of JS interfaces that need to be detected. For a list of all JS interfaces, see Appendix 2.
            success: function (res) {
              console.log("checkJsApi", res);
            },
          });
        });
        this.$wx.error((res) => {
          console.log("wx.error", res);
        });
      }
    },

created() {
    this.getWxJssdkConf();
  },

Vue.prototype.$api = api

/**
     * @description: Get authorization code
     * @param {*}
     * @return {*}
     */
    getCode() {
      // Extract code from window.location.href and assign value // window.location.href.split('#')[0]
      if (window.location.href.indexOf("state") !== -1) {
        this.code = qs.parse(
          window.location.href.split("#")[0].split("?")[1]
        ).code;
      } 
      
      if (this.code) {
          // Code exists to directly call the interface this.handGetUserInfo(this.code);
        } else {
          this.handLogin();
        }
    },
    /**
     * @description: Get user authorization login* @param {*}
     * @return {*}
     */
    handLogin() {
      // Redirect the address to the current page and get the code in the path
      const hrefUrl = window.location.href;

      if (this.code === "") {
        window.location.replace(`
		https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXX
                           &redirect_uri=${encodeURIComponent(hrefUrl)}
                           &response_type=code
                           &scope=snsapi_base
                           &state=h5#wechat_redirect`);
      }
    },
    /**
     * @description: Get user information* @param {*} code
     * @return {*}
     */
    handGetUserInfo(code) {
      //Call the background interface},

mounted() {
    window.addEventListener("online", this.updateOnlineStatus);
    window.addEventListener("offline", this.updateOnlineStatus);
  },
  
 methods: {
 		updateOnlineStatus(e) {
      const { type } = e;
      console.log("type==============", type);
      this.onLine = type === "online";
    },
 }
 beforeDestroy() {
    window.removeEventListener("online", this.updateOnlineStatus);
    window.removeEventListener("offline", this.updateOnlineStatus);
  },

router.beforeEach((to, from, next) => {
  const ua = navigator.userAgent.toLowerCase();
  if (
    to.path !== "/notwx" &&
    !(ua.match(/MicroMessenger/i) == "micromessenger")
  ) {
    next("/notwx");
  } else {
    next();
  }
});

router.afterEach(() => {
  window.scrollTo(0, 0);
});