<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                [TOC] * * * * * ### **一、樣式問題** 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模式][1] 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](https://github.com/chrisvfritz/prerender-spa-plugin) ``` 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地址](https://github.com/monkeyWangs/vue-meta-info) [vue-meta-info的相關文章](https://zhuanlan.zhihu.com/p/29148760) ### **四、數據響應失效** 首先在`Vue.js` 中對象的響應時依賴`Object.defineProperty` 方法的,而對于數組是沒有這個方法的。 > 這里需要注意,如果數組中是對象,當對象里數據變化時是可以渲染的,如果類似`[0,1,2,3]`這樣的數組,數據變化時,是不會渲染的。 所以數組存儲的數據在更改時是沒有響應變化的。所以`Vue`提供了`$set()` 方法: [官網][2] ```javascript 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.`<le-input>`表單使用回車觸發事件。 ``` <el-input @keyup.enter.native="onSubmit" ></el-input> ``` 這里需要在`@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` 全寫,盡量不使用`@` 縮寫,因為使用`@` 縮寫有時會不起作用 ``` <edit-add-ver v-on:childMethodShow="showEdit"></edit-add-ver> ``` ### **九、vue-cli 目錄的分析以及我個人常用的項目構建** 具體目錄分析進入 [https://github.com/webxiaoma/vue-demos/tree/master/vue-cli](https://github.com/webxiaoma/vue-demos/tree/master/vue-cli) [1]: https://router.vuejs.org/zh-cn/essentials/history-mode.html [2]: https://cn.vuejs.org/v2/api/#Vue-set
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看