工作中的项目不止有页面繁多的模块化项目，还会只有一两个页面的类似于填写信息参与活动的活动页。这个时候，就可以回归以前的三剑客模式，在 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 对象添加组件

不使用脚手架的 vue 应用的更多相关文章

  1. 利用VUE-CLI脚手架搭建VUE项目

    前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...

  2. 使用vue-cli脚手架创建vue项目

    使用vue-cli脚手架创建vue项目 首先,你已经安装了node. 使用vue-cli@2 创建项目 执行 命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...

  3. 简单vue项目脚手架（vue+webpack2.0+vuex+vue-router）

    github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...

  4. 脚手架搭建vue框架

    一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v  (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , ...

  5. vue-cli脚手架搭建Vue.js项目

    前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g   PS:-g 就是 ...

  6. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  7. 在windows下用脚手架搭建vue环境

    做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接 ...

  8. vue-cli脚手架创建vue项目

    CLI 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置 cnpm install -g @vue/cli // 如果需要使用旧版本的vue init功能(脚手架2),你可以全 ...

  9. 使用脚手架搭建vue项目

    全局安装环境 安装webpack npm install webpack -g 安装vue脚手架 npm install -g @vue/cli-init 初始化vue项目 vue init webp ...

  10. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

随机推荐

  1. api接口测试工具和接口文档管理工具

    api接口测试工具和接口文档管理工具 1.postman(https://www.getpostman.com) Postman 是一个很强大的 API调试.Http请求的工具.她可是允许用户发送任何 ...

  2. 075 Sort Colors 分类颜色

    给定一个包含红色.白色和蓝色,且含有 n 个元素的数组,对它们进行排序,使得相同颜色的元素相邻,颜色顺序为红色.白色.蓝色.此题中,我们使用整数 0, 1 和 2 分别表示红色,白色和蓝色.注意:不能 ...

  3. centos6.3搭建FTP服务器图文教程

    今天下午不忙,没什么事,看到我大红盟linux版块如此冷清,心不能忍,做了个FTP服务器的搭建教程,大家可以看看, 不会做视频,就图文交叉了,写得不好,望谅解.以后有时间再出一个LNMP的教程. 不磨 ...

  4. <img/>标签属性

    属性        属性值               描述 src            url               图像的路径 alt             文本            ...

  5. javascript结合nodejs实现多文件上传

    前端文件上传功能比较依赖后端,所以第一步用nodejs实现一个供文件上传的功能接口. 因为本人对nodejs也是一知半解,所以刚开始的想法是像原始的ajax交互那样,获取上传文件的内容,然后再通过no ...

  6. Distributed Transaction Coordinator(DTC)一些问题的解决方法

    有时运行某个程序或者安装SQL Server时报错. 错误信息: 事务管理器不可用.(从 HRESULT 异常: 0x8004D01B) 启动服务Distributed Transaction Coo ...

  7. [VC]WindowProc和DefWindowProc函数

    在Windows操作系统里,当窗口显示之后,它就可以接收到系统源源不断地发过来的消息,然后窗口就需要处理这些消息,因此就需要一个函数来处理这些消 息.在API里定义了一个函数为回调函数,当系统需要向窗 ...

  8. 【转】ios -- ViewController跳转+传值(方式一)

    方式一:通过定义一个实体类传值 (从ViewController1 跳转至 ViewController2) 1.定义实体类NotificationEntity .h声明文件 #import < ...

  9. 徒手教你使用zookeeper编写服务发现

    zookeeper是一个强一致[不严格]的分布式数据库,由多个节点共同组成一个分布式集群,挂掉任意一个节点,数据库仍然可以正常工作,客户端无感知故障切换.客户端向任意一个节点写入数据,其它节点可以立即 ...

  10. JS给数字加千位分隔符

    本文原链接:https://www.jianshu.com/p/928c68f92c0c JavaScript实现千位分隔符 将普通的数字转换为带千位分隔符格式的数字字符串是一个非常常见的问题,千位分 ...