不使用脚手架的 vue 应用

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

关键点：

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

主页面基本代码如下：

&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

  &lt;meta charset="UTF-8"&gt;

  &lt;meta name="viewport" content="initial-scale = 1.0, width = device-width, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 0"&gt;

  &lt;meta name="x5-orientation" content="portrait"&gt;

  &lt;title&gt;测试&lt;/title&gt;

  &lt;link rel="stylesheet" href="./normalize.css"&gt;

  &lt;link rel="stylesheet" href="./swalAlert2.css"&gt;

  &lt;link rel="stylesheet" href="./index.css"&gt;

  &lt;link rel="stylesheet" href="./mint.css"&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;div id="app"&gt;

    &lt;my-header&gt;&lt;/my-header&gt;

    &lt;div class="container" v-show="!showExample"&gt;&lt;/div&gt;

      &lt;div class="btn"&gt;

        &lt;mt-button @click="submit"&gt;确定提交&lt;/mt-button&gt;

      &lt;/div&gt;

      &lt;div class="rules"&gt;

        &lt;h3&gt;活动规则&lt;/h3&gt;

        &lt;ul&gt;

          &lt;li v-for="item in list" :key="item"&gt;{{ item }}&lt;/li&gt;

        &lt;/ul&gt;

      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div @click="closePic" v-show="showExample"&gt;

      &lt;img src="img/order-copy.jpg" width="100%"&gt;

    &lt;/div&gt;

    &lt;mt-popup v-model="showBigPic" popup-transition="popup-fade"&gt;

      &lt;img src="img/Praise_img_sample-graph_full_default@2x.jpg" class="pop-img" @click="showBigPic=false"&gt;

    &lt;/mt-popup&gt;

  &lt;/div&gt;

  &lt;script src="./polyfill.min.js"&gt;&lt;/script&gt;

  &lt;script src="./swalAlert2.js"&gt;&lt;/script&gt;

  &lt;script src="./axios.js"&gt;&lt;/script&gt;

  &lt;script src="./vue-minify.js"&gt;&lt;/script&gt;

  &lt;script src="./mint.js"&gt;&lt;/script&gt;

  &lt;script src="./header.js"&gt;&lt;/script&gt;

  &lt;script&gt;

    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) =&gt; {})

          .catch((failed) =&gt; {})

        }

      },

      created: function created() {

        this.getFontSize();

        this.getToken();

      }

    });

  &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

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

公共组件基本代码如下：

var headerTemplate = '&lt;div&gt; header HTML 代码&lt;/div&gt;'

Vue.component('my-header', {

    template: headerTemplate,

    data: xxx,

    methods: {}

    // ...

})

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

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

利用VUE-CLI脚手架搭建VUE项目
前言在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...
使用vue-cli脚手架创建vue项目
使用vue-cli脚手架创建vue项目首先,你已经安装了node. 使用vue-cli@2 创建项目执行命令: npm i -g vue-cli@2 //全局安装vue-cli@2脚手架 : v ...
简单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 ...
脚手架搭建vue框架
一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下版本): 2)如果执行结果显示: xx 不是内部命令,说明你还没有安装node , ...
vue-cli脚手架搭建Vue.js项目
前提条件: 一.node.js 下载 https://nodejs.org/zh-cn/download/ 二.webpack 安装 npm install webpack -g PS:-g 就是 ...
使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
在windows下用脚手架搭建vue环境
做了几个月vue项目,最近两个项目使用脚手架搭建的,确实用脚手架搭建方便了许多,想想以前自己手配的时候,确实是... 1.在这之前我是默认你已经使用过vue的,也默认你已经安装了node.js 2.接 ...
vue-cli脚手架创建vue项目
CLI 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置 cnpm install -g @vue/cli // 如果需要使用旧版本的vue init功能(脚手架2),你可以全 ...
使用脚手架搭建vue项目
全局安装环境安装webpack npm install webpack -g 安装vue脚手架 npm install -g @vue/cli-init 初始化vue项目 vue init webp ...
Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

随机推荐

MySQL表完整性约束
=======MySQL表完整性约束====== 目录: 一.介绍二.not null 与 default 三.unique 四.primary key 五.auto_increment 六.for ...
PHP是.NET上的一门开发语言
.NET Core 已经实现了PHP JIT,现在PHP是.NET上的一门开发语言 12月23日,由开源中国联合中国电子技术标准化研究院主办的2017源创会年终盛典在北京万豪酒店顺利举行.在本次大 ...
vue.js数据绑定语法
原始高清大图下载 1.数据绑定 html代码: <div id="first" class="first">msg:{{msg}}</div& ...
ruby 正则表达式匹配中文
1.puts /[一-龥]+/.match("this is 中文") =>中文 2.str2="123中文"puts / ...
P4869 罪犯分组
思路: 明显的dp,虽然我想到了二进制模拟,想到了转移,但还是先看了题解,原来真是这样,,,,不是第三题吗? 用f[i]表示,对于前i个罪犯最少需要分几组. 对于每个状态用二进制表示,第i位上1,0表 ...
pytorch 安装错误，报 GLIBCXX_3.4.20 错误
pytorch 从源码安装链接:http://blog.csdn.net/u012442157/article/details/78134888 发现错误: 解决方案: http://blog.cs ...
HTTP状态码完整版
HTTP 状态代码的完整列表 1xx(临时响应) 用于表示临时响应并需要请求者执行操作才能继续的状态代码. 代码说明 100(继续) 请求者应当继续提出请求.服务器返回此代码则意味着,服务器已收 ...
I/O————流
流的关系图缓冲流分为字节和字符缓冲流(图中是经常用的搭配,PrintWrite与BufferedWrite都继承java.io.Write) 字节缓冲流为: BufferedInputStream— ...
cloud turbine
turbine是聚合服务器发送事件流数据的一个工具,hystrix的监控中,只能监控单个节点,实际生产中都为集群,因此可以通过 turbine来监控集群下hystrix的metrics情况,通过eur ...
getuser
Help on function getuser in module getpass: getuser() Get the username from the environment or pa ...

不使用脚手架的 vue 应用

关键点：

主页面基本代码如下：

公共组件基本代码如下：

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

随机推荐

热门专题