Vue 項目中使用 iView 組件庫設置樣式不生效解決方案記錄

將 iVew 引入項目後發現沒有生效，經過查找總結問題是：安裝 iView 的版本太低，與 Vue 不匹配，最後沒有生效。

初始我執行的是 安裝 iView 1.0的命令，

$ npm install [email protected] --save

安裝的是 Vue 3.0

vue create demoproject

在 HelloWorld.vue 中寫入下面代碼，界面中輸入框未顯示

<i-input :value.sync="value" placeholder="請輸入..." style="width: 300px"></i-input>

於是卸載已經安裝的低版本 iView

npm uninstall iview

安裝高版本的 iView，也叫 View UI

$ npm install view-design --save

同時 main.js 中需包含

import iView from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(iView);

經過這樣一番操作，iView就可以生效了（截圖是用到了輸入框的樣式）

可以在 package.json 中查看安裝的是4.x版本

以上是使用 iView 組件庫的一點踩坑經歷