1. 程式人生 > >vue + elementUI++Vue常見的坑

vue + elementUI++Vue常見的坑

此專案主要是列舉平時遇見的問題的一些解決方案,後續開發直接引用就行&&參考就行

module.vue是模板結構,新建.vue檔案時複製貼上,專案開發完成刪除即可

模板是在vue-cli 腳手架的基礎上根據自身專案需求做的改動

專案說明如下如下:(之前遇到的一些坑)

  1. 版本號新增(解決快取問題) node接收打包變數 npm run build v1.1 上線時,編寫上線指令碼 參考之前指令碼 sh line.sh v1.1
  2. img 標籤src路徑js動態新增打包時候吧不會新增上版本號 第一種解決方案:在版本資料夾外層,單獨複製一份static(之前專案解決方案) 第二種解決方案:地址 require(path)(建議以後用這種)
  3. 線上&&測試環境請求介面地址更換 第一種:手動切換(目前專案中用的是這種) 第二種:判斷是開發環境還是生產環境(前端搞定,不需後端配合,不需手動) 第三種:配置proxyTable轉發請求但是後端也需要nginx轉發請求(好處減少了前端一點程式碼,不用再拼接請求地址
  4. 請求引入的是vue-resource 目前vue-resource已經停止更新,但是我們還是用vue-resource的原因是我們的後端介面都是 跨域請求,vue官方推薦的是axios但是目前來說我是沒發現跨域的解決方法 專案中的api資料夾是專案的資料層,做到資料層與邏輯層分離 api.js就是請求層,config.js就是介面配置資訊
  5. 多語言處理-vue-I18n [email protected]和 餓了嗎相容,其他版本開發比較複雜 iview 也是一樣必須用5版本 詳細用法參考main.js
  6. Vue-router 懶載入 babel-polyfill修復低版本瀏覽器核心不支援es6語法 注意:只需安裝到開發依賴
  7. 線上過濾console.log
  8. 解決首屏載入白屏現象

專案目錄說明

  1. api(service 模組) 資料請求層,api.js資料請求處理,config.js介面配置資訊
  2. router index.js路由配置資訊
  3. store vuex狀態管理,如果狀態較多時 把store分割成module,方便管理 例子:就是分割成模組的例子,可供參考
  4. tool 專案中所需的一些工具(例如:一些自定義的一些工具函式)
  5. vueI18n 多語言--包(分模組。方便管理)
  6. bus.js一個通訊例項,主要解決元件之間通訊問題(非父子元件),注意方法命名問題
  7. config.js 專案中的配置資訊
  8. static 專案中的靜態資源js\img\css
專案地址:https://github.com/f-z-k/vue-element.git

相關推薦

vue + elementUI++Vue常見

此專案主要是列舉平時遇見的問題的一些解決方案,後續開發直接引用就行&&參考就行 module.vue是模板結構,新建.vue檔案時複製貼上,專案開發完成刪除即可 模板是在vue-cli 腳手架的基礎上根據自身專案需求做的改動 專案說明如下如下:(之前

[ vue ] 生命週期 & 常見

vue生命週期(重) beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed ------beforeCreate建立前狀態------

vue+elementUI+vue-i18n實現中英文切換。

安裝: npm install vue-i18n vue.js+vue-i18n國際化 在main.js同級建i18n資料夾,並裡面建i18n.js、langs資料夾,langs資料夾下建en.js、cn.js 目錄如下: . ├── App.vue ├── assets │

vue的幾個常見點問題,想起來了就寫點

說下我遇到過的vue的問題 1 v-for 和 v-if  當它們處於同一節點,v-for的優先順序比v-if更高。  而且v-if是建立或者刪除這個DOM元素,而v-for則是將其的display屬性更改。 2 vue檔案中內聯樣式中有無scoped屬性的差別

vue+webpack+sass 入 配置ES6 編譯

詳細 logs com install sets pac all webp ack Install 是不可少的事情 1 npm install --save-dev babel-core babel-preset-es2015 1 npm install --save

vue使用swiper的-刷新不動,loop屬性失效

style nbsp ora set 自己 pro dsl ble container 在網上查了很多問題,原因應該是加載順序的問題,數據還沒有完全加載的時候就已經渲染swiper了。 解決辦法,在swiper初始化的時候把以下兩個屬性加上。 observer:true,

記錄vue中踩的

開始 mage images image 解決 返回值 log 美的 讓我 vue已經大紅大紫好多年了,我這個小白終於有一次能在項目中和它開始親密接觸。 腳手架搭建後,再學習安裝一些插件,遇到了不少坑,所幸都解決了。 其中有一個問題我想就此記錄一下: vue中與後臺請求數據

Vue + ElementUi 頁面跳轉傳值的方法

element info vue 跳轉 body 9.png 分享圖片 nbsp .com       跳轉的頁面(接收):                跳轉的頁面(接收):    Vue + ElementUi 頁面跳轉傳值的方法

vue項目爬筆記(一)

div data and tab header 文件的 host 都是 mod 1.作為一個後臺管理系統, 采用vue2.0+ vuex+iview+vue-router+webpack 需要清楚各個文件的意義,譬如存儲,登錄,請求封裝.....項目框架搭建就是這樣! 2

Vue項目踩記~

found 成功 原因 提示 數據文件 support then ror tro 最近在寫一個Vue的項目~踩了很多坑,下面總結一下出現的問題 1.空白頁面,不提示報錯,但是什麽都沒有 main.js const app = new Vue({ router }).$

vue+elementui 新增和編輯如何實現公用一個彈框

and v-model element tex off footer top ima mac //html代碼: //按鈕 <el-button type="primary" size="medium" @click="addEquipment">新增<

Vue2.0總結———vue使用過程常見的一些問題

www. uncaught com sin tps 發生 str 有用 腳手架 Vue目前的的開發模式主要有兩種:1.直接頁面級的開發,script直接引入Vue2.工程性開發,webpack+loader或者直接使用腳手架工具Vue-cli,裏面的文件都配置好了 web

vue elementui二級聯動下拉選項demo

itl sel 組件 style -c chan lang new 區域 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

Vue ElementUI 的使用

-c AD style test 餓了麽 index -s element -- 簡介: 餓了麽公司基於vue開的的vue的Ui組件庫 1.Element Ui 基於vue pc端的UI框架 2. MintUi

vue elementui table 雙擊單元格實現編輯,聚焦,失去焦點,顯示隱藏input和span

ntc 單元 src func cell Dimension === http nts <el-table :data="tableData" class="tb-edit" style="width: 100%"

vue+elementui實現分頁效果

當我們向後臺請求大量資料的時候,並要在頁面展示出來,請求的資料可能上百條資料或者更多的時候,並不想在一個頁面展示,這就需要使用分頁功能來去完成了。 1.本次所使用的是vue2.0+element-ui實現一個分頁功能,element-ui這個元件特別豐富,分頁中給我提供了一個Pagination

elementUI vue table 操作選項中彈出框確定dialog

1.html <el-table-column label="操作" width="150" fixed="right" align="center"> <template scope="scope"> <el-button type="text

vue+elementui 對話方塊取消 表單驗證重置

最近在寫增刪改查,在新增的時候要彈出對話方塊填寫form表單資訊,發現對話方塊右上角的小X和右下角的取消不是一個事件,我想在點選它們兩個的時候都可以重置表單,最終解決,如下。 vue: <el-dialog  :title="titleName[dialogStatus]"&

vue+elementUI樹形表格授權

效果圖: gitHub地址:https://github.com/Echo987/vue-tableAuthor 根據花褲衩的樹形表格改的: 新建vue元件: <template> <div class="app-container"> &l

vue elementUi安裝腳手架(大全)

一.安裝node.js 首先需要安裝node環境,可以直接到中文官網http://nodejs.cn/下載安裝包。 只是這樣安裝的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安裝http://blog.csdn.net/s8460049/article/detai