iview

淡淡的烟草味﹌ 2024-02-19 17:14 13阅读 0赞

#### iView ####

*   *  在Vue中使用iview
     *   *  一次性引入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)

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 iview

iView 在Vue中使用iview 一次性引入iview 按需引入在Vue中使用iview 一次性引入

淡淡的烟草味﹌/ 2024年02月19日 17:14/ 0 赞/ 14 阅读

相关 iview_入门

执行`npm install iview --save` 在项目中引入iview 引入 iView \ 一般在 webpack 入口页面 main.js 中如下配置：

柔光的暖阳◎/ 2022年05月20日 00:46/ 0 赞/ 129 阅读

相关 iView 的后台管理系统模板 iView Admin

iView Admin 详细介绍 iView admin 是基于 Vue.js，搭配使用 [iView][] UI 组件库形成的一套后台集成解决方案简介 iView

朴灿烈づ我的快乐病毒、/ 2022年05月18日 09:41/ 0 赞/ 391 阅读

相关 vue + iview项目构建

最近在着手搭建自己的个人博客，确定技术栈为vue + node.js(express)+mysql，所以需要用vue写博客pc端以及后台管理系统页面，而UI组件则是用iview

ゞ浴缸里的玫瑰/ 2022年04月10日 12:53/ 0 赞/ 402 阅读

相关 iview表格

这个设计的真好，向iview作者致敬 <template> <Table border :columns="columns1" :data="data

缺乏、安全感/ 2022年04月10日 09:23/ 0 赞/ 232 阅读

相关穿梭框iview

穿梭框双栏穿梭选择框，常用于将多个项目从一边移动到另一边。说明 Transfer 组件主要基于以下四个 API 来使用： :data：总体数据，数组，每项为

╰半橙微兮°/ 2022年03月27日 08:40/ 0 赞/ 245 阅读

相关 iview-admin-使用

\----------------------------------------------------------- index.html: <div id="app"

朱雀/ 2021年12月10日 00:57/ 0 赞/ 272 阅读

相关 iview upload

第一：Upload中clearFiles方法怎么调用 <Upload :action="uploadUrl" :on-success="uploadGeneralSu

谁践踏了优雅/ 2021年11月29日 15:54/ 0 赞/ 226 阅读

相关 iview -- 列表渲染

渲染函数 render: (h) => { return h('标签', { 属性 }, '填充文本') }

向右看齐/ 2021年09月19日 12:28/ 0 赞/ 354 阅读

相关 iview-admin 笔记

1、路由routers // 直接配，跳转是打开新页面 { path: '/login', name: 'login', meta: { ...

冷不防/ 2021年06月06日 15:22/ 0 赞/ 428 阅读