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

1.新cli工具生成項目配置webpack，根路徑創(chuàng)建vue.conf.js

module.exports = {configureWebpack: config => {// 為生產環(huán)境修改配置...if (process.env.NODE_ENV === 'production') {//html文件引入絕對地址config.output.publicPath = ''//不生成.map文件config.devtool = false;} else {// 為開發(fā)環(huán)境修改配置...}} } 復制代碼

2.npm run serve自動啟動用本地ip打開瀏覽器

"serve": "vue-cli-service serve --open --host 192.168.1.169" 復制代碼

window系統(tǒng)可以在cmd里面用ipconfig查看本地ip，然后直接把地址復制發(fā)送到手機，在手機上調試頁面，前提是手機和你電腦在一個網絡環(huán)境下

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 是一個節(jié)流函數，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 復制代碼

總結

以上是生活随笔為你收集整理的用vue做项目的一些总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。