vue之項目實戰elementUI經驗之談
vue項目編譯搭建
一、babel預編譯
1.導出模塊報錯
編譯module.exports.default = *** 報錯
方案解決:
二、cli腳手架
(一)、cypress端到端測試
1.依賴包安裝
方法一、離線安裝:
下載cypress.zip包
配置系統環境變量
CYPRESS_INSTALL_BINARY
文件路徑:./cypress.zip
重啓電腦
運行npm i
方法二、在線安裝:
@cypress/code-coverage
@vue/cli-plugin-e2e-cypress
在線安裝速度慢時建議採用離線安裝
2.測試案例書寫
3.測試命令執行
package.json配置
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e -- mode development --headless",
"test:e2e-gui": "vue-cli-service test:e2e --mode development"
在現有項目中搭建測試
安裝cli:npm install -g @vue/cli
運行:vue add e2e-cypress
4.參考API
項目js常用誤區
項目vue用法採坑
項目兼容性問題
一、ie的兼容性問題
(一)、placeholder在ie上的兼容性問題
placeholder在不同瀏覽器上表象不同,下文暗紋指示placeholder,文字提到的標籤都是指elementUI組件庫中的組件,在實際開發中遇到的問題
1.input輸入框有placeholder時
在ie上,對input標籤監聽change事件,當有暗紋時組件初始化加載時會調一次change事件,而chrome不會
2.autoComplete組件
對組件綁定select/change事件,當有暗紋時,ie上的表象如是:選擇下來列表出發select事件,會觸發blur事件,在實際中,若blur加了一些業務邏輯比如校驗等,選中會走這裏的邏輯
3.placeholder樣式問題
placeholder樣式問題可更改但ie不兼容,暗紋超出輸入框時不會出現折貼多行效果
elementUI用法注意事項
後續更新。。。