用vue做项目的一些总结

原文链接：https://juejin.im/post/5b1e2b01f265da6e494def6b

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'exportdefault (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'functioncheckStatus(response) {if (response.status >= 200 && response.status < 300) {return response} else {var error = newError(response.statusText)error.response = responsethrow error}
}functionparseJSON(response) {return response.json()
}exportdefault (url, params = {}, method = 'GET') => {returnnewPromise((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) => {returnawait request(config[key], params, matchs[2]);}
}
exportdefault API;

定义接口函数 key [ 方法名，请求类型 ] ：请求url

以后就在这个文件里面加入请求函数，并且比较方便快捷

exportdefault {'login POST': 'user/login','getDetails POST': 'user/getDetails','getCaptcha POST': 'user/getCaptcha','sendMsg POST': 'user/sendMsg','verifyinfo POST': 'user/verifyinfo','modifyPwd POST': 'user/modifyPwd',
}

页面中使用

exportdefault {async created(){let { data } = await API.getDetails({ page: this.page });}
}

7. 设置不同路由下的页面title ./utils/index.js

exportlet setTitle = (title) => {document.title = titlevar 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)}
}

8. 使用新的vue-cli工具，使用yarn初始化项目报错`command failed: yarn`，

这时如果无法解决又想切换回npm来安装，可以这样做：

C:\Users\你的用户名\ .vuerc 找到这个文件修改packageManager

packageManager： npm