工作中的項目不止有頁面繁多的模塊化項目，還會只有一兩個頁面的類似於填寫信息參與活動的活動頁。這個時候，就可以回歸以前的三劍客模式，在 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 對象添加組件