1.vue雙向數(shù)據(jù)綁定vuex中的state

在vue中, 不允許直接綁定vuex的值到組件中, 若是直接使用, 則會報錯 have no setter

方法一: 使用get和set

// 在從組件的computed中
computed: {
    user: {
        get() {
          return this.$store.state.user
        },
        set(v) {
          // 使用vuex中的mutations中定義好的方法來改變
          this.$store.commit('USER', v)
        }
    }
}
// 在組件中就可以使用
<input v-modle="user" />

方法二: 使用watch

// 在組件中綁定
<input v-modle="user" />

// 在computed中獲取vuex的值
computed: {
  ...mapState( { user: state => state.user } )
}

// 在組件的watch中觀測
watch: {
  'user': {
      deep: true,
      handler(value) {
        // 使用vuex中的mutations中定義好的方法來改變
          this.$store.commit('USER', value)
      }
  }
}

2.(webpack)vue-cli構(gòu)建的項目如何設(shè)置每個頁面的title

在路由里每個都添加一個meta：

[{
    path:'/login',
    meta: {
      title: '登錄頁面'
    },
    component:'login'
}]

鉤子函數(shù)，在main.js中添加如下代碼：

router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title;
  next()
})

3.vue項目中使用axios上傳圖片等文件

通過form表單提交，html代碼如下：

<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

JS代碼：

import axios from 'axios'

update(e) {
    let file = e.target.files[0]
    let param = new FormData(); // 創(chuàng)建form對象
    param.append('file', file); // 通過append向form對象添加數(shù)據(jù)
    param.append('chunk', '0'); // 添加form表單中其他數(shù)據(jù)
    let config = { // 添加請求頭
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    };
    axios.post('http://172.19.26.60:8080/user/headurl', param, config)
    .then(response => {
        if (response.data.code === 200) {
            this.ImgUrl = response.data.data;
        }
    })
}

4.qs.stringify() 和JSON.stringify()的區(qū)別、vux中使用post提交表單數(shù)據(jù)需要qs庫序列化

qs庫的npm地址：https://www.npmjs.com/package/qs

功能雖然都是序列化。假設(shè)我要提交的數(shù)據(jù)如下：

var a = {name:'hehe',age:10};

qs.stringify序列化結(jié)果如下：name=hehe&age=10

而JSON.stringify序列化結(jié)果如下："{"a":"hehe","age":10}"

vux中使用post提交表單數(shù)據(jù)：

this.$http.post(this.$sign.config.url.loginUrl,this.$qs.stringify({
    "phone":this.phoneNumber,
    "vCode":this.loginCode,
    "smsCode":this.phoneCode    
    })
)
.then(response=>{
    console.log(response.data);
    if(response.data.httpCode == 200){
        
    }else{
        
    }
}) 

在firebug中可以看到傳遞的參數(shù)：phone=15210275239&vCode=8vsd&smsCode=1534

在vue中使用axios：

this.$axios.post(loginUrl, {
    "email": this.email,
    "password": this.password
}, {
    transformRequest: (data) => {
        return this.$qs.stringify(data)
    },
}).then(res => {
    if(res.data.resultCode == RESULT_CODE_SUCCESS){
        console.log('登錄成功');
        this.$router.push({name:"home"})
    }else{
        console.log('登錄失敗');
    }
}).catch(err => {
    console.log('登登錄出現(xiàn)錯誤');
})

5.vue全局實現(xiàn)的setCookie、getCookie、delCookie

//設(shè)置cookie,增加到vue實例方便全局調(diào)用
Vue.prototype.setCookie = (c_name, value, expiredays) => {
  var exdate = new Date();　　　　
  exdate.setDate(exdate.getDate() + expiredays);　　　　
  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
}

//獲取cookie
Vue.prototype.getCookie = (name) => {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)){
        return (arr[2]);
    }   
    return null;   
}

//刪除cookie
Vue.prototype.delCookie =(name) => {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = this.getCookie(name);
    if (cval != null){
        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
    }     
}

6.webpack proxyTable 代理跨域

webpack 開發(fā)環(huán)境可以使用proxyTable 來代理跨域，生產(chǎn)環(huán)境的話可以根據(jù)各自的服務(wù)器進(jìn)行配置代理跨域就行了。在我們的項目config/index.js 文件下可以看到有一個proxyTable的屬性，我們對其簡單的改寫：

proxyTable: {
    '/api': {
        target: 'http://api.douban.com/v2',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}

這樣當(dāng)我們訪問localhost:8080/api/movie的時候 其實我們訪問的是http://api.douban.com/v2/movie這樣便達(dá)到了一種跨域請求的方案。

當(dāng)然我們也可以根據(jù)具體的接口的后綴來匹配代理，如后綴為.shtml，代碼如下：

proxyTable: {
    '**/*.shtml': {
        target: 'http://192.168.198.111:8080/abc',
        changeOrigin: true
    }
}

可參考地址：

webpack 前后端分離開發(fā)接口調(diào)試解決方案，proxyTable解決方案
http-proxy-middleware

7.vue和mintui-Loadmore結(jié)合實現(xiàn)下拉刷新，上拉加載 （待優(yōu)化）

mintui是餓了么團(tuán)隊針對vue開發(fā)的移動端組件庫，方便實現(xiàn)移動端的一些功能，這里只用了Loadmore功能實現(xiàn)移動端的上拉分頁刷新，下拉加載數(shù)據(jù).
mintui官網(wǎng)：http://mint-ui.github.io/

<template>  
  <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">  
    <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">  
      <ul class="list" v-for="(val, key) in pageList">  
        <li>  
          <div>我是小11</div>  
          <div>我是小11</div>  
        </li>  
      </ul>  
    </v-loadmore>  
  </div>  
</template>  
<script>  
  import {Loadmore} from 'mint-ui';  
  export default {  
    data:function() {  
      return {  
        searchCondition:{  //分頁屬性  
          pageNo:"1",  
          pageSize:"10"  
        },  
        pageList:[],  
        allLoaded: false, //是否可以上拉屬性，false可以上拉，true為禁止上拉，就是不讓往上劃加載數(shù)據(jù)了  
        scrollMode:"auto" //移動端彈性滾動效果，touch為彈性滾動，auto是非彈性滾動  
      }  
    },  
    components: {  
      'v-loadmore':Loadmore  // 為組件起別名，vue轉(zhuǎn)換template標(biāo)簽時不會區(qū)分大小寫，例如：loadMore這種標(biāo)簽轉(zhuǎn)換完就會變成loadmore，容易出現(xiàn)一些匹配問題  
                              // 推薦應(yīng)用組件時用a-b形式起名  
    },  
    mounted(){  
      this.loadPageList();  //初次訪問查詢列表  
    },  
    methods: {  
      loadTop:function() { //組件提供的下拉觸發(fā)方法  
        //下拉加載  
        this.loadPageList();  
        this.$refs.loadmore.onTopLoaded();// 固定方法，查詢完要調(diào)用一次，用于重新定位  
      },  
      loadBottom:function() {  
        // 上拉加載  
        this.more();// 上拉觸發(fā)的分頁查詢  
        this.$refs.loadmore.onBottomLoaded();// 固定方法，查詢完要調(diào)用一次，用于重新定位  
      },  
      loadPageList:function (){  
          // 查詢數(shù)據(jù)  
        this.api.PageList(this.searchCondition).then(data =>{  
          // 是否還有下一頁，加個方法判斷，沒有下一頁要禁止上拉  
          this.isHaveMore(data.result.haveMore);  
          this.pageList = data.result.pageList;  
          this.$nextTick(function () {  
            // 原意是DOM更新循環(huán)結(jié)束時調(diào)用延遲回調(diào)函數(shù)，大意就是DOM元素在因為某些原因要進(jìn)行修改就在這里寫，要在修改某些數(shù)據(jù)后才能寫，  
            // 這里之所以加是因為有個坑，iphone在使用-webkit-overflow-scrolling屬性，就是移動端彈性滾動效果時會屏蔽loadmore的上拉加載效果，  
            // 花了好久才解決這個問題，就是用這個函數(shù)，意思就是先設(shè)置屬性為auto，正?；瑒?，加載完數(shù)據(jù)后改成彈性滑動，安卓沒有這個問題，移動端彈性滑動體驗會更好  
            this.scrollMode = "touch";  
          });  
        });  
      },  
      more:function (){  
          // 分頁查詢  
        this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1;  
        this.api.loadPageList(this.searchCondition).then(data=>{  
          this.pageList = this.pageList.concat(data.result.pageList);  
          this.isHaveMore(data.result.haveMore);  
        });  
      },  
      isHaveMore:function(isHaveMore){  
        // 是否還有下一頁，如果沒有就禁止上拉刷新  
        this.allLoaded = true; //true是禁止上拉加載  
        if(isHaveMore){  
          this.allLoaded = false;  
        }  
      }  
    }  
  }  
</script>

PS：有個坑一定要注意就是注釋里說的iPhone里loadmore和-webkit-overflow-scrolling屬性沖突無法上拉問題

可參考另外一個插件，沒有使用過，《簡單靈活且強(qiáng)大的Vue下拉刷新組件：vue-pull-to》

8.vue非父子組件通信

如果2個組件不是父子組件那么如何通信呢？這時可以通過eventHub來實現(xiàn)通信。所謂eventHub就是創(chuàng)建一個事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件。

方式一
組件1觸發(fā)：

<div @click="eve"></div>
methods: {
    eve() {
        Hub.$emit('change','hehe'); //Hub觸發(fā)事件
    }
}

組件2接收:

created() {
    Hub.$on('change', (msg) => { //Hub接收事件
        this.msg = msg;
    });
}

可參考：vue非父子組件怎么進(jìn)行通信

方式二

把中轉(zhuǎn)站數(shù)據(jù)存放到根實例下面，如下：

// 根組件（this.$root)
new Vue({
 el: '#app',
 router,
 render: h => h(App),
 data: {
  // 空的實例放到根組件下，所有的子組件都能調(diào)用
  Bus: new Vue()
 }
})

組件1觸發(fā)：

<div @click="eve"></div>
methods: {
    eve() {
        this.$root.Bus.$emit('change','hehe'); 
    }
}

組件2接收：

created() {
    this.$root.Bus.$on('change', (msg) => { //接收事件
        this.msg = msg;
    });
}

注：官方推薦的eventbus 解決方案的缺陷在于， 在數(shù)據(jù)傳遞過程中，兩個組件必須都已經(jīng)被渲染過。

9.IE9報vuex requires a Promise polyfill in this browser問題解決

因為使用了 ES6 中用來傳遞異步消息的的Promise，而IE低版本的瀏覽器不支持。

解決方法
第一步： 安裝 babel-polyfill

babel-polyfill可以模擬ES6使用的環(huán)境，可以使用ES6的所有新方法

npm install --save-dev babel-polyfill

第二步： 在 Webpack/Browserify/Node中使用

在webpack.config.js文件中把

module.exports = {
    entry: {
        app: './src/main.js'
    }
}

替換為：

module.exports = {
    entry: {
        app: ["babel-polyfill", "./src/main.js"]
    }
};

當(dāng)然還有其它兩種引入方式：

require("babel-polyfill");
import"babel-polyfill";

10.啟動Vue項目時提示: [BABEL] ... max of "500KB".

在項目的根目錄下找到 .babelrc 文件，增加 "compact": false ，如：

{
  "compact": false,
  "presets": ["env", "react", "stage-0"],
  "plugins": [
    "transform-runtime"
  ]
}

如果不存在則手動創(chuàng)建該文件，并填寫內(nèi)容如：

{
  "compact": false
}

11.在main.js中監(jiān)聽微信瀏覽器返回按鈕，讓其不能返回

if(from.name == 'staffInfo' && to.name == 'Login'){
    next({path:'/staffInfo',query:{redirect:from.fullPath}});
}else if(from.name == 'acountFill' && to.name == 'Login'){
    next({path:'/acount/acountFill',query:{redirect:from.fullPath}});
}

12.pdf.js默認(rèn)不顯示電子簽章(數(shù)字簽名）問題解決

1. pdfjs 舊版本
pdf.worker.js 找到

if(this.data.fieldType === 'Sig') {
    warn('unimplemented annotation type: Widget signature');
    return false;
}

注解上面代碼.
2. pdfjs 新 版本v1.10.88
pdf.worker.js 找到

if(data.fieldType === 'Sig') {
    _this2.setFlags(_util.AnnotationFlag.HIDDEN);
} 

13.pdf.js預(yù)覽，中文顯示亂碼解決方法

有可能是有pdf不支持的字體格式，引入pdf.js的字體試試

const CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.489/cmaps/';
pdfjsLib.getDocument({
    data: pdfData,
    cMapUrl: CMAP_URL,
    cMapPacked: true,
})

14.解決Vue引入百度地圖JSSDK：BMap is undefined 問題

export default {
  init: function (){
    //console.log("初始化百度地圖腳本...");
    const AK = "AK密鑰";
    const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak="+ AK +"&s=1&callback=onBMapCallback";
    return new Promise((resolve, reject) => {
      // 如果已加載直接返回
      if(typeof BMap !== "undefined") {
        resolve(BMap);
        return true;
      }
      // 百度地圖異步加載回調(diào)處理
      window.onBMapCallback = function () {
        console.log("百度地圖腳本初始化成功...");
        resolve(BMap);
      };

      // 插入script腳本
      let scriptNode = document.createElement("script");
      scriptNode.setAttribute("type", "text/javascript");
      scriptNode.setAttribute("src", BMap_URL);
      document.body.appendChild(scriptNode);
    });
  }
} 

說明：

直接使用官網(wǎng)提供的引用地址：http://api.map.baidu.com/api?v=2.0&ak=您的密鑰
啟用 callback 參數(shù)，異步加載必須使用此參數(shù)才可以生效
啟用 https 配置，通過 s=1 參數(shù)實現(xiàn)
API版本為2.0，經(jīng)測試使用，發(fā)現(xiàn)3.0版本在HTTPS環(huán)境下是有問題的，腳本內(nèi)部某些請求固定使用HTTP，無法正常使用。

參考地址：https://segmentfault.com/a/1190000012815739

15.本地啟動vue項目，host配置域名訪問出現(xiàn)Invalid Host header 服務(wù)器域名訪問出現(xiàn)的問題

在webpack.dev.config.js中找到 devServer下的hot,再下面添加 disableHostCheck: true,來解決127.0.0.1指向其他域名時出現(xiàn)"Invalid Host header"問題

如圖所示：

16.vue項目中在使用vue-router切換頁面的時候滾動條怎樣自動滾動到頂部？

有時候我們需要頁面滾動條滾動到某一固定的位置，一般使用WindowscrollTo() 方法。

語法就是：scrollTo(xpos,ypos)

xpos：必需。要在窗口文檔顯示區(qū)左上角顯示的文檔的 x 坐標(biāo)。

ypos：必需。要在窗口文檔顯示區(qū)左上角顯示的文檔的 y 坐標(biāo)。

例如滾動內(nèi)容的坐標(biāo)位置100,500：

window.scrollTo(100,500);

好了，這個scrollTop這兒只是簡單介紹一下，下面我們介紹下veu-router中的滾動行為。

使用前端路由，當(dāng)切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。vue-router能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。

注意: 這個功能只在HTML5 history 模式下可用。

當(dāng)創(chuàng)建一個 Router 實例，你可以提供一個scrollBehavior方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滾動到哪個的位置
  }
})

scrollBehavior方法接收to和from路由對象。第三個參數(shù)savedPosition當(dāng)且僅當(dāng)popstate導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時才可用。

這個方法返回滾動位置的對象信息，長這樣：

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }}(offset 只在 2.6.0+ 支持)

如果返回一個 falsy (譯者注：falsy 不是false，參考這里)的值，或者是一個空對象，那么不會發(fā)生滾動。

舉例：

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

對于所有路由導(dǎo)航，簡單地讓頁面滾動到頂部。

返回savedPosition，在按下 后退/前進(jìn) 按鈕時，就會像瀏覽器的原生表現(xiàn)那樣

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

如果你要模擬『滾動到錨點』的行為：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

我們還可以利用路由元信息更細(xì)顆粒度地控制滾動。

 routes: [
    { path: '/', component: Home, meta: { scrollToTop: true }},
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar, meta: { scrollToTop: true }}
  ]

完整的例子：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = {
  template: `
    <div>
      bar
      <div></div>
      <p id="anchor">Anchor</p>
    </div>
  `
}

// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    // savedPosition is only available for popstate navigations.
    return savedPosition
  } else {
    const position = {}
    // new navigation.
    // scroll to anchor by returning the selector
    if (to.hash) {
      position.selector = to.hash
    }
    // check if any matched route config has meta that requires scrolling to top
    if (to.matched.some(m => m.meta.scrollToTop)) {
      // cords will be used if no selector is provided,
      // or if the selector didn't match any element.
      position.x = 0
      position.y = 0
    }
    // if the returned position is falsy or an empty object,
    // will retain current scroll position.
    return position
  }
}

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  scrollBehavior,
  routes: [
    { path: '/', component: Home, meta: { scrollToTop: true }},
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar, meta: { scrollToTop: true }}
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <h1>Scroll Behavior</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/foo">/foo</router-link></li>
        <li><router-link to="/bar">/bar</router-link></li>
        <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

在網(wǎng)上查了一下，網(wǎng)友說還可以試試在main.js入口文件配合vue-router寫這個

router.afterEach((to,from,next) => {
    window.scrollTo(0,0);
});

17.tips：webpack中alias配置中的“@”的作用

如題所示，build文件夾下的webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  }

其中的@的意思是：只是一個別名而已。這里設(shè)置別名是為了讓后續(xù)引用的地方減少路徑的復(fù)雜度。

//例如
src
- components
  - a.vue
- router
  - home
    - index.vue

index.vue 里，正常引用 A 組件：
import A from '../../components/a.vue'
如果設(shè)置了 alias 后。
alias: {
 'vue$': 'vue/dist/vue.esm.js',
 '@': resolve('src')
}

引用的地方路徑就可以這樣了
import A from '@/components/a.vue'
這里的 @ 就起到了【resolve('src')】路徑的作用。

18.tips：package.json中的dependencies與devDependencies之間的區(qū)別

–save-dev和–save的區(qū)別

我們在使用npm install 安裝模塊或插件的時候，有兩種命令把他們寫入到 package.json 文件里面去，比如：

–save-dev 安裝的 插件，被寫入到 devDependencies 對象里面去

–save 安裝的 插件 ，被寫入到 dependencies 對象里面去

devDependencies是只會在開發(fā)環(huán)境下依賴的模塊，生產(chǎn)環(huán)境不會被打入包內(nèi)。

dependencies是不僅在開發(fā)環(huán)境使用，在生成環(huán)境也需要。

19.tips：package.json設(shè)置環(huán)境變量

三種方法可以在package.json設(shè)置環(huán)境變量。

先安裝cross-env:

npm install --save-dev cross-env

package.json設(shè)置：

{
  "scripts": {
    "dev1": "export WEBPACK_ENV=production && npx webpack -p",  ## mac
    "dev1": "set WEBPACK_ENV=production && npx webpack -p", ## windows
    "dev2": "cross-env CURRENT_ENV=development webpack-dev-server --inline --progress", ## 兼容所有平臺
  }
}

設(shè)置環(huán)境變量的作用：

在項目的js腳本中，通過process.env這個對象就可以訪問到設(shè)置的環(huán)境變量結(jié)合打包軟件webpack等等，實現(xiàn)不同的代碼邏輯：

console.log(process.env.WEBPACK_ENV)
console.log(process.env.CURRENT_ENV)

擴(kuò)展參考：阮一峰：npm scripts 使用指南

總結(jié)

以上是生活随笔為你收集整理的【vue】常见开发知识点与问题整理（持续更新）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。