vue application without scaffold

Keywords: Front-end Vue axios JSON

There are not only many modular projects in the work, but also only one or two activity pages similar to filling in information to participate in activities. At this time, you can return to the previous three swordsman mode, and reference vue.js in index.html for development.

Key points:

Babel Polyfill needs to be introduced to transform the code of es6. It needs to be the first script introduced
Download the css and js of the third-party library to the local reference
Public components can be split and used through script
When going online, you need to manually switch the interface address

The basic code of the main page is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale = 1.0, width = device-width, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 0">
  <meta name="x5-orientation" content="portrait">
  <title>test</title>
  <link rel="stylesheet" href="./normalize.css">
  <link rel="stylesheet" href="./swalAlert2.css">
  <link rel="stylesheet" href="./index.css">
  <link rel="stylesheet" href="./mint.css">
</head>
<body>
  <div id="app">

    <my-header></my-header>
    
    <div class="container" v-show="!showExample"></div>

      <div class="btn">
        <mt-button @click="submit">Confirm submission</mt-button>
      </div>

      <div class="rules">
        <h3>Activity rules</h3>
        <ul>
          <li v-for="item in list" :key="item">{{ item }}</li>
        </ul>
      </div>
    </div>

    <div @click="closePic" v-show="showExample">
      <img src="img/order-copy.jpg" width="100%">
    </div>

    <mt-popup v-model="showBigPic" popup-transition="popup-fade">
      <img src="img/Praise_img_sample-graph_full_default@2x.jpg" class="pop-img" @click="showBigPic=false">
    </mt-popup>
  </div>

  <script src="./polyfill.min.js"></script>
  <script src="./swalAlert2.js"></script>
  <script src="./axios.js"></script>
  <script src="./vue-minify.js"></script>
  <script src="./mint.js"></script>
  <script src="./header.js"></script>
  <script>
    var instance = axios.create({
      timeout: 10000,
      transformResponse: [function (data) {
        var value = JSON.parse(data);
        if (value.state_code === 60028) {
          return {
            reason: value.data,
            title: value.info
          };
        }
        return value;
      }]
    });
    new Vue({
      el: '#app',
      data: function data() {
        return {
          list: [],
          uploading: false,
          showPic: true,
          imageUrl: 'img/buyer_uploadImg.png',
          token: '',
          showBigPic: false,
          showExample: false,
          phone: null,
          order: null
        };
      },

      methods: {
        toPicTure: function toPicTure() {
          this.showExample = true;
          document.documentElement.scrollTop = 0;
          document.body.scrollTop = 0;
          instance({
            method: 'post',
            url: 'xxxx',
            data: 'fdsfdaf',
            headers: 'fds=xofda'
          })
          .then((data) => {})
          .catch((failed) => {})
        }  
      },
      created: function created() {
        this.getFontSize();
        this.getToken();
      }
    });
  </script>
</body>
</html>

The code consists of two parts: setting the options of axios and instantiating Vue. The parameters in Vue are the same as those in single file components.

The basic code of common components is as follows:

var headerTemplate = '<div> header HTML Code</div>'
Vue.component('my-header', {
    template: headerTemplate,
    data: xxx,
    methods: {}
    // ...
})

The main purpose of the code is to add components to the global Vue objects

Posted by Threepwood on Fri, 13 Dec 2019 07:54:04 -0800

Programmer Group

vue application without scaffold

Key points:

The basic code of the main page is as follows:

The basic code of common components is as follows:

Hot Keywords