iview

在Vue中使用iview

一次性引入iview

安装iview

npm install iview --save

在main.js中配置iview

import Vue from 'vue'
import App from './App.vue'
// 引入iview插件
import iView from 'iView'
// 导入iview样式
import 'iview/dist/styles/iview.css'

Vue.use(iView)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

关闭vscode报错提示：

[eslint-plugin-vue]
[vue/no-parsing-error] 
Parsing error: x-invalid-end-tag.

依次选择 文件->首选项->设置，然后找到vetur.validation.template关闭即可。
并且在eslint的rules中配置：

"rules": {
      "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
    }

按需引入

安装babel-plugin-import：

npm install babel-plugin-import --save-dev

在.babelrc文件中（没有该文件就新建）配置babel-plugin-import

{
    "plugins": [
        ["import", {
            "libraryName": "iview",
            "libraryDirectory": "src/components"
        }]
    ]
}

在main.js中引入iview的样式：

import 'iview/dist/styles/iview.css'

按需引入iview组件：

import { Button } from 'iview'

Vue.component('IButton', Button)