1. 程式人生 > >使用Vue元件問題彙總

使用Vue元件問題彙總

  • vue.runtime.esm.js:588 [Vue warn]: Do not use built-in or reserved HTML elements as component id: button

不要使用內建的或保留的HTML元素作為元件ID。有一種情況是元件的name選項設定為HTML元素button。在使用遞迴元件時需要設定元件的name選項。

  • TypeError: Cannot read property ‘validateSchema’ of undefined

webpack4.x缺少webpack-cli的安裝:npm install webpack-cli --save-dev

  • 下載iview元件庫原始碼執行npm run dev報錯:

ERROR in ./node_modules/[email protected]@css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/style-compiler?{“optionsId”:“0”,“vue”:true,“scoped”:false,“sourceMap”:true}!./node_modules/[email protected]@less-loader/dist/cjs.js?{“sourceMap”:true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./examples/app.vue

.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
in /Users/snow/program files/iview-2.0/src/styles/color/bezierEasing.less (line 110, column 0)
@ ./node_modules/vue-style-loader!./node_modules/[email protected]@css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/style-compiler?{“optionsId”:“0”,“vue”:true,“scoped”:false,“sourceMap”:true}!./node_modules/

[email protected]@less-loader/dist/cjs.js?{“sourceMap”:true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./examples/app.vue

一種解決方案是將依賴包中的less從3.x版本降級為2.x版本:
npm install [email protected] --save-dev
這種方法能夠解決其他類似.bezierEasingMixin();出錯的問題。

  • npm run dev 啟動vue專案,vue-router路由正常,重新整理介面後出現Cannot GET /xxx

將路由模式關閉history模式,改為預設的hash模式,該問題解決。且webpack熱更新也可以正常生效了。懷疑可能跟history模式需要伺服器端進行配置,使所有路由指向同一個html有關。