国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue項目中的常見問題（vue-cli版本3.0.0）

wangbjun / 1209人閱讀

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

一、樣式問題

1.vue中使用less

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

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

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

如果 style 中加了 scoped 去掉它。

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

 /deep/.el-submenu__title .el-icon-arrow-down{
    margin-top:-5px;
}
二、vue-router 問題

1.去掉vue項目路徑中的 #

主要用到router 的 history模式。官網說的很詳細，以及注意點：vue-router官網 HTML5 History模式

2.當我們通過router 中的query從一A頁面想給B頁面傳遞一個Object 對象形式的數據時，第一次B頁面可以拿到數據，但是刷新B頁面后，數據會消失。這里有一下解決方法：

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

將A頁面數據存儲在sessionStorage 中，B頁面同該sessionStorage 獲取

后臺提供多帶帶的接口，在B頁面請求A頁面傳過來的數據

三、頁面預渲染（seo優化問題）

官網也指出，如果你只是為了改善營銷頁面的SEO優化，你可能需要預渲染了。而無需使用web服務器實時動態變異html，而是使用預渲染方式，在構建時簡單地生成針對特定路由的靜態 HTML 文件

1.預渲染

如果你想要預渲染需要使用 prerender-spa-plugin 插件來處理你的文件。這里建議你直接看官網的api， 2.x版本的和3.x版本的api不同。所以建議直接看官網了解最新的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"),
      // 對應路由生成的目錄
      routes: [ "/", "/about", "/some/deep/nested/route" ],
    })
  ]
}

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

vue-meta-info的相關文章

四、數據響應失效

首先在Vue.js 中對象的響應時依賴Object.defineProperty 方法的，而對于數組是沒有這個方法的。

這里需要注意，如果數組中是對象，當對象里數據變化時是可以渲染的，如果類似[0,1,2,3]這樣的數組，數據變化時，是不會渲染的。

所以數組存儲的數據在更改時是沒有響應變化的。所以Vue提供了$set() 方法： 官網

vue.array.$set(0,"change")
五、數據雙向綁定問題

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

let evaluateReq = { // 初始數據
    type:"0",
    pageSize:10,
    pageNum:1,
}

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

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

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

1.表單使用回車觸發事件。

這里需要在@keyup.enter 后面加上native才會觸發回車事件。這個東西在一些實際上處理 DOM 原生事件的場合才需要添加額外的標識符。

2.當瀏覽器窗口變小時，el-table組件寬度不隨窗口響應變小。

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

.el-table{
   max-width:99.9%
}
七、axios 交互問題

1.vue中創建excel 的下載，解決excel下載亂碼問題

我們可以在axios的請求攔截或響應攔截中去動態創建a標簽下載excel

function excelDown(res){  // excel 下載請求
  //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); //創建下載的鏈接
　　downloadElement.href = res.request.responseURL +`&token=${sessionStorage.JRYC_TOKEN}`;
　　downloadElement.download = "列表.xls"; //下載后文件名
　　document.body.appendChild(downloadElement);
　　downloadElement.click(); //點擊下載
　　document.body.removeChild(downloadElement); //下載完成移除元素
　　window.URL.revokeObjectURL(href); //釋放掉blob對象
}


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
    }
})
八、其它注意事項

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

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

2.在使用 import ... from ... 引入同級目錄下的組件時，盡量加上 ./ ， 不然有時會報錯

import Header from "./Header";

3.使用$emit 不起作用，這里我建議你在子組件綁定父組件事件時 使用 v-on 全寫，盡量不使用@ 縮寫，因為使用@ 縮寫有時會不起作用
九、vue-cli 目錄的分析以及我個人常用的項目構建

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94083.html

相關文章

  • 如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端項目模板

    摘要：從使用和也是支持的。此處直接首頁其中當時，內的配置信息會直接覆蓋初始化后項目中的。文件接下來就是，這個文件負責的就是注入或是修改項目中文件。比如我的其中和就是用戶在處理中設定的問題的回答值。 vue-cli 之 Preset vue-cli 插件開發指南 TLDR 背景介紹 vue-cli 3 完全推翻了 vue-cli 2 的整體架構設計，所以當你需要給組里定制一份基于 vue-cl...

    Jokcy 評論0 收藏0

  • 如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端項目模板

    摘要：從使用和也是支持的。此處直接首頁其中當時，內的配置信息會直接覆蓋初始化后項目中的。文件接下來就是，這個文件負責的就是注入或是修改項目中文件。比如我的其中和就是用戶在處理中設定的問題的回答值。 vue-cli 之 Preset vue-cli 插件開發指南 TLDR 背景介紹 vue-cli 3 完全推翻了 vue-cli 2 的整體架構設計，所以當你需要給組里定制一份基于 vue-cl...

    desdik 評論0 收藏0

  • 如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端項目模板

    摘要：從使用和也是支持的。此處直接首頁其中當時，內的配置信息會直接覆蓋初始化后項目中的。文件接下來就是，這個文件負責的就是注入或是修改項目中文件。比如我的其中和就是用戶在處理中設定的問題的回答值。 vue-cli 之 Preset vue-cli 插件開發指南 TLDR 背景介紹 vue-cli 3 完全推翻了 vue-cli 2 的整體架構設計，所以當你需要給組里定制一份基于 vue-cl...

    MAX_zuo 評論0 收藏0

  • Vue Cli安裝以及使用

    摘要：單元測試前端的單元測試目前有兩個比較熱的框架，一個是的方式，一個是。小伙伴們不用急，關于單元測試這塊，我會找時間寫博客的。首先前端的測試分為兩種，一個是單元測試，另一個就是測試了。? ? ? ? 因為公司項目要用vue框架，所以會用vue-cli來新建項目。用過vue的都知道，要全局安裝vue以及腳手架vue-cli，然后執行vue init webpack projectname來新建vu...

    lemanli 評論0 收藏0

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

    摘要：記使用方式和之前版本的差異的使用下載和安裝項目生成的目錄結構以上，目前版本的使用下載和安裝項目生成的目錄結構新的目錄結構，隱藏了配置文件，封裝了細節對比個區別區別下載包的包命變化。貌似是之前的版本有點問題 記vue-cli@3.0使用方式和之前版本的差異 @2.9.3的使用 1.下載vue-cli和安裝項目 cnpm i -g vue-cli#2.9.3 vue init webpa...

    wow_worktile 評論0 收藏0

發表評論

0條評論

wangbjun

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<