vue項(xiàng)目中的常見問題（vue-cli版本3.0.0）

wangbjun 發(fā)布于2019-08-22 16:08 / 1394人閱讀

摘要：在要改變的樣式前加二問題去掉項(xiàng)目路徑中的主要用到的模式。這里建議你直接看官網(wǎng)的，版本的和版本的不同。當(dāng)瀏覽器窗口變小時(shí)，組件寬度不隨窗口響應(yīng)變小。這里我們需要沖突掉中的樣式，該值不能設(shè)置成可以改成小于即可。

一、樣式問題

1.vue中使用less

安裝less依賴 npm install less less-loader --save-dev

在使用時(shí) 在style標(biāo)簽中加入 lang="less" 也可以加上scoped代表樣式只在此作用域中有效。

2.使用element插件時(shí)修改其樣式，在vue中不起作用，這里有幾種方法可以嘗試

如果 style 中加了 scoped 去掉它。

在要改變的樣式前加 /deep/

 /deep/.el-submenu__title .el-icon-arrow-down{
    margin-top:-5px;
}

二、vue-router 問題

1.去掉vue項(xiàng)目路徑中的 #

主要用到router 的 history模式。官網(wǎng)說的很詳細(xì)，以及注意點(diǎn)：vue-router官網(wǎng) HTML5 History模式

2.當(dāng)我們通過router 中的query從一A頁面想給B頁面?zhèn)鬟f一個(gè)Object 對(duì)象形式的數(shù)據(jù)時(shí)，第一次B頁面可以拿到數(shù)據(jù)，但是刷新B頁面后，數(shù)據(jù)會(huì)消失。這里有一下解決方法：

將A頁面的數(shù)據(jù)通過 JSON.stringify() 變成字符串，傳遞

將A頁面數(shù)據(jù)存儲(chǔ)在sessionStorage 中，B頁面同該sessionStorage 獲取

后臺(tái)提供多帶帶的接口，在B頁面請(qǐng)求A頁面?zhèn)鬟^來的數(shù)據(jù)

三、頁面預(yù)渲染（seo優(yōu)化問題）

官網(wǎng)也指出，如果你只是為了改善營銷頁面的SEO優(yōu)化，你可能需要預(yù)渲染了。而無需使用web服務(wù)器實(shí)時(shí)動(dòng)態(tài)變異html，而是使用預(yù)渲染方式，在構(gòu)建時(shí)簡(jiǎn)單地生成針對(duì)特定路由的靜態(tài) HTML 文件

1.預(yù)渲染

如果你想要預(yù)渲染需要使用 prerender-spa-plugin 插件來處理你的文件。這里建議你直接看官網(wǎng)的api， 2.x版本的和3.x版本的api不同。所以建議直接看官網(wǎng)了解最新的api。 prerender-spa-plugin GitHub

const path = require("path")
const PrerenderSPAPlugin = require("prerender-spa-plugin")

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // 生成文件的路徑
      staticDir: path.join(__dirname, "dist"),
      // 對(duì)應(yīng)路由生成的目錄
      routes: [ "/", "/about", "/some/deep/nested/route" ],
    })
  ]
}

另外為頁面做Meta SEO優(yōu)化可以使用 vue-meta-info GitHub地址

vue-meta-info的相關(guān)文章

四、數(shù)據(jù)響應(yīng)失效

首先在Vue.js 中對(duì)象的響應(yīng)時(shí)依賴Object.defineProperty 方法的，而對(duì)于數(shù)組是沒有這個(gè)方法的。

這里需要注意，如果數(shù)組中是對(duì)象，當(dāng)對(duì)象里數(shù)據(jù)變化時(shí)是可以渲染的，如果類似[0,1,2,3]這樣的數(shù)組，數(shù)據(jù)變化時(shí)，是不會(huì)渲染的。

所以數(shù)組存儲(chǔ)的數(shù)據(jù)在更改時(shí)是沒有響應(yīng)變化的。所以Vue提供了$set() 方法：官網(wǎng)

vue.array.$set(0,"change")

五、數(shù)據(jù)雙向綁定問題

1.在使用vuex時(shí)，我們兩個(gè)模塊可能使用同一個(gè)數(shù)據(jù)，比如兩模塊中的表單使用的是同一個(gè)數(shù)據(jù)，當(dāng)其中一個(gè)模塊中的表單填寫好時(shí)，我們進(jìn)入另一個(gè)模塊表單時(shí)，也會(huì)顯示該數(shù)據(jù)，如果該數(shù)據(jù)少還可以，如果有很多字段，我們一個(gè)一個(gè)清空會(huì)和麻煩，我這里解決的辦法就是：使用JSON.stringify 和 JSON.parse()

let evaluateReq = { // 初始數(shù)據(jù)
    type:"0",
    pageSize:10,
    pageNum:1,
}

const state = {
    evaluateListReq:JSON.parse(JSON.stringify(evaluateReq)), 
}

這樣做，當(dāng)我們初始化 evaluateListReq 數(shù)據(jù)時(shí)，可以講 evaluateReq 數(shù)據(jù) 通過 mutations 賦值給evaluateListReq ，如果我們這里不使用JSON.stringify 和 JSON.parse() 而直接賦值， evaluateReq 中的數(shù)據(jù)與 evaluateListReq 會(huì)被vue認(rèn)為是同一個(gè)數(shù)據(jù)，都綁定上，一個(gè)值變化，都會(huì)隨著變化。

六、使用Element(餓了么)插件問題

1.表單使用回車觸發(fā)事件。

這里需要在@keyup.enter 后面加上native才會(huì)觸發(fā)回車事件。這個(gè)東西在一些實(shí)際上處理 DOM 原生事件的場(chǎng)合才需要添加額外的標(biāo)識(shí)符。

2.當(dāng)瀏覽器窗口變小時(shí)，el-table組件寬度不隨窗口響應(yīng)變小。

這里我們需要沖突掉Element 中el-table 的 max-width:100% 樣式，該值不能設(shè)置成100%,可以改成99%,小于100%即可。

.el-table{
   max-width:99.9%
}

七、axios 交互問題

1.vue中創(chuàng)建excel 的下載，解決excel下載亂碼問題

我們可以在axios的請(qǐng)求攔截或響應(yīng)攔截中去動(dòng)態(tài)創(chuàng)建a標(biāo)簽下載excel

function excelDown(res){  // excel 下載請(qǐng)求
  //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet這里表示xlsx類型
  var blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"});
　　var downloadElement = document.createElement("a");
　　var href = window.URL.createObjectURL(blob); //創(chuàng)建下載的鏈接
　　downloadElement.href = res.request.responseURL +`&token=${sessionStorage.JRYC_TOKEN}`;
　　downloadElement.download = "列表.xls"; //下載后文件名
　　document.body.appendChild(downloadElement);
　　downloadElement.click(); //點(diǎn)擊下載
　　document.body.removeChild(downloadElement); //下載完成移除元素
　　window.URL.revokeObjectURL(href); //釋放掉blob對(duì)象
}


axios.interceptors.response.use(res => {

   if (res.headers["content-type"] == "application/vnd.ms-excel" || res.headers["content-type"] == "application/vnd.ms-excel;charset=UTF-8") {
        excelDown(res)
        return {code:0,state:"success"}
    }else{
      return res
    }
})

八、其它注意事項(xiàng)

1.使用v-for 時(shí)我們盡量攜帶key值，以方便vue的渲染。

v-for="(item, index) in list" class="list" :key="index"

2.在使用 import ... from ... 引入同級(jí)目錄下的組件時(shí)，盡量加上 ./ ，不然有時(shí)會(huì)報(bào)錯(cuò)

import Header from "./Header";

3.使用$emit 不起作用，這里我建議你在子組件綁定父組件事件時(shí) 使用 v-on 全寫，盡量不使用@ 縮寫，因?yàn)槭褂?b>@ 縮寫有時(shí)會(huì)不起作用

九、vue-cli 目錄的分析以及我個(gè)人常用的項(xiàng)目構(gòu)建

具體目錄分析進(jìn)入 https://github.com/webxiaoma/vue-demos/tree/master/vue-cli

GPU云服務(wù)器云服務(wù)器 vue-cli vue-cli3 云服務(wù)器搭建vue項(xiàng)目騰訊云服務(wù)器部署vue項(xiàng)目

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94083.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wangbjun

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

php如何連接云虛擬主機(jī)-該怎么選擇合適自己的云虛擬主機(jī)？

閱讀 3469·2021-09-22 15:01
CSS過渡動(dòng)畫的理解

閱讀 590·2019-08-30 11:11
pug學(xué)習(xí)

閱讀 1041·2019-08-29 16:17
通過CSS規(guī)則禁止選中文字

閱讀 1265·2019-08-29 12:23
原生js實(shí)現(xiàn)移動(dòng)端選擇器插件

閱讀 2081·2019-08-26 11:48
ANGULAR2 與 D3.js集成實(shí)現(xiàn)自定義可視化

閱讀 3235·2019-08-26 11:48
react工程化項(xiàng)目配置指南

閱讀 1481·2019-08-26 10:33
Ant Design Pro - 實(shí)踐React Hooks - 頁面

閱讀 2003·2019-08-26 10:30

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

vue項(xiàng)目中的常見問題（vue-cli版本3.0.0）

相關(guān)文章

**如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端項(xiàng)目模板**

**如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端項(xiàng)目模板**

**如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端項(xiàng)目模板**

Vue Cli安裝以及使用

**記vue-cli@3.0和之前版本的差異**

發(fā)表評(píng)論

0條評(píng)論

wangbjun

男|高級(jí)講師

TA的文章

php如何連接云虛擬主機(jī)-該怎么選擇合適自己的云虛擬主機(jī)？

CSS過渡動(dòng)畫的理解

pug學(xué)習(xí)

通過CSS規(guī)則禁止選中文字

原生js實(shí)現(xiàn)移動(dòng)端選擇器插件

ANGULAR2 與 D3.js集成實(shí)現(xiàn)自定義可視化

react工程化項(xiàng)目配置指南

Ant Design Pro - 實(shí)踐React Hooks - 頁面

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

vue項(xiàng)目中的常見問題（vue-cli版本3.0.0）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！