1.新cli工具生成專案配置webpack，根路徑建立vue.conf.js
module.exports = {
configureWebpack: config => {
// 為生產環境修改配置...
if (process.env.NODE_ENV === 'production') {
//html檔案引入絕對地址
config.output.publicPath = ''
//不生成.map檔案
config.devtool = false;
} else {
// 為開發環境修改配置...
}
}
}
複製程式碼2.npm run serve自動啟動用本地ip開啟瀏覽器
"serve": "vue-cli-service serve --open --host 192.168.1.169"
複製程式碼window系統可以在cmd裡面用ipconfig檢視本地ip，然後直接把地址複製傳送到手機，在手機上除錯頁面，前提是手機和你電腦在一個網路環境下
3.移動端click點選清除300ms延遲
import FastClick from 'fastclick'
window.addEventListener('load', () => {
FastClick.attach(document.body)
})
複製程式碼在main.js引入程式碼，然後頁面和元件都可以直接使用@click來繫結事件
4.使用rem來寫移動端頁面
//main.js 引入依賴
import 'amfe-flexible'
//_base.scss 設計圖寬度除以10,假如設計圖寬度是750px那麼，基礎寬度就是75
$baseWidthSize: 75 !default;
@function to($px) {
@return $px / $baseWidthSize * 1rem;
}
//元件和頁面使用; to()裡面的數值是photoshop裡測量的值
<style lang="scss">
@import "../scss/_base.scss";
.box{
width: to(750);
height: to(100);
}
</style>
複製程式碼5.自定義指令上拉載入(div內滾動)
//main.js 引入
import directive from './directive'
directive(Vue)
//./directive/index.js
import ScrollFix from 'scrollfix'
export default (Vue) => {
Vue.directive('scroll', {
inserted: (el) => {
new ScrollFix(el);
}
});
Vue.directive('pull', {
bind: (el, binding, vnode) => {
if (!binding.value) {
return;
}
let { self } = binding.value;
el.addEventListener('scroll', utils.throttle(() => {
let { scrollTop, offsetHeight, scrollHeight } = el;
//整個列表的高度 - ( 滾動的高度 + 盒子的高度 )
if ((scrollHeight - offsetHeight - scrollTop < 200) && self.isMore) {
self.isMore = false;
self.pullRequest && self.pullRequest();
console.log('上拉指令');
}
}), false);
}
});
}
複製程式碼這裡定義了2個指令
v-scroll用來處理ios div內滾動bug
v-pull 用來做上拉載入
我習慣做div內滾動上拉載入，因為結合ScrollFix這個外掛，在下拉頁面的時候可以看不見此網頁由 192.168.1.169:8080 提供底色的背景；
utils.throttle 是一個節流函式，utils是個物件我掛載到全域性了，使用utils的地方多嫌import麻煩；
在頁面中使用
<div class="done" v-scroll v-pull="self">
…
</div>
export default {
data() {
return {
data: [],
page:1,
self: this,
isMore: true
}
},
created(){
this.pullRequest({page:1})
},
methods: {
//上拉載入
async pullRequest() {
let { data } = await API.getList({ page: this.page });
if(data.length == 0){
this.isMore = false;
}else{
this.isMore = true;
this.page ++;
}
}
}
}
複製程式碼6.對請求函式的封裝
./api/server.js
import 'whatwg-fetch'
import * as config from '@/config'
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response
} else {
var error = new Error(response.statusText)
error.response = response
throw error
}
}
function parseJSON(response) {
return response.json()
}
export default (url, params = {}, method = 'GET') => {
return new Promise((resolve, reject) => {
fetch(config.url + url, {
method,
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': 'Bearer ' + (params.token || utils.getStorage('token'))
},
body: JSON.stringify(params)
}).then(checkStatus)
.then(parseJSON)
.then((data) => {
resolve(data);
})
.catch((err) => {
reject(err)
})
})
}
複製程式碼請求用的fetch這個包，她可以跨域請求資料
對每個請求函式的封裝 ./api/index.js; 在main.js中引入，並且把API物件掛載到了全域性
import request from './server'
import config from './api'
let API = {};
for (let key in config) {
let matchs = key.match(/^(\S+)\s*(.*)$/);
API[`${matchs[1]}`] = async (params) => {
return await request(config[key], params, matchs[2]);
}
}
export default API;
複製程式碼./api/api.js 以後就在這個檔案裡面加入請求函式，方便並且快捷
定義介面函式 key [ 方法名，請求型別 ] ： 請求url
export default {
'login POST': 'user/login',
'getDetails POST': 'user/getDetails',
'getCaptcha POST': 'user/getCaptcha',
'sendMsg POST': 'user/sendMsg',
'verifyinfo POST': 'user/verifyinfo',
'modifyPwd POST': 'user/modifyPwd',
}
複製程式碼頁面中使用
export default {
async created(){
let { data } = await API.getDetails({ page: this.page });
}
}
複製程式碼7. 設定不同路由下的頁面title ./utils/index.js
export let setTitle = (title) => {
document.title = title
var mobile = navigator.userAgent.toLowerCase()
if (/iphone|ipad|ipod/.test(mobile)) {
var iframe = document.createElement('iframe')
iframe.style.visibility = 'hidden'
// 替換成站標favicon路徑或者任意存在的較小的圖片即可
iframe.setAttribute('src', '')
var iframeCallback = function () {
setTimeout(function () {
iframe.removeEventListener('load', iframeCallback)
document.body.removeChild(iframe)
}, 0)
}
iframe.addEventListener('load', iframeCallback)
document.body.appendChild(iframe)
}
}
複製程式碼iframe.setAttribute('src', '') 這裡一定要設定一個圖片連結，不然蘋果手機iframe標籤不會刪除，會影響頁面佈局
8. 使用新的vue-cli工具，使用yarn初始化專案報錯command failed: yarn，
這時如果無法解決又想切換回npm來安裝，可以這樣做：
C:\Users\你的使用者名稱\ .vuerc 找到這個檔案修改packageManager
packageManager： npm
複製程式碼公眾號文章
