用vue做项目的一些总结

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
复制代码

公众号文章

原文发布时间：2018-06-11

原文作者：zhongs

本文来源掘金如需转载请紧急联系作者