不使用脚手架的 vue 应用

2024年4月21日 108次阅读 来源: 将臣

工作中的项目不止有页面繁多的模块化项目，还会只有一两个页面的类似于填写信息参与活动的活动页。这个时候，就可以回归以前的三剑客模式，在 index.html 里引用 vue.js 进行开发。

关键点：

  1. 引入 babel-polyfill 以转换 es6 的代码，需要作为第一个引入的 script 脚本
  2. 将所用到的第三方库的 css 和 js 下载到本地引用
  3. 可以拆分公共组件，通过 script 引入使用
  4. 上线时，需要手动切换接口地址

主页面基本代码如下：

<!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>测试</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">确定提交</mt-button>
      </div>

      <div class="rules">
        <h3>活动规则</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>

代码主要是两部分，设置 axios 的选项，实例化 Vue，Vue 里的参数和单文件组件的一样。

公共组件基本代码如下：

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

代码主要是给全局 Vue 对象添加组件

    原文作者：将臣
    原文地址: https://segmentfault.com/a/1190000016852251
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞