不使用腳手架的 vue 應用
阿新 • • 發佈：2018-11-03
工作中的專案不止有頁面繁多的模組化專案，還會只有一兩個頁面的類似於填寫資訊參與活動的活動頁。這個時候，就可以迴歸以前的三劍客模式，在 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/[email protected]" 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 物件新增元件