工作中的项目不止有页面繁多的模块化项目，还会只有一两个页面的类似于填写信息参与活动的活动页。这个时候，就可以回归以前的三剑客模式，在 index.html 里引用 vue.js 进行开发。
关键点：
- 引入 babel-polyfill 以转换 es6 的代码，需要作为第一个引入的 script 脚本
- 将所用到的第三方库的 css 和 js 下载到本地引用
- 可以拆分公共组件，通过 script 引入使用
- 上线时，需要手动切换接口地址
主页面基本代码如下：
<!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 对象添加组件