VUE(四)：引入iview

环境基础
vue-cli 3.x搭建环境

安装
npm安装
NPM安装 iView

npm i -S iview
全局引入
一般在 webpack 入口页面 main.js 中如下配置：

import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);
會出現 iView is unidefined,正確的配置
src/iview/index.js

import iview from ‘iview’
前面的 iview 要用小寫

import Vue from "vue";
import iview from "iview";
import "iview/dist/styles/iview.css";

Vue.use(iview);
src/main.js加入這一行即可

import "./iview";
注意：babel.config.js中的plugins配置要删除，否则会引起冲突

按需引入
修改babel.config.js，添加下面配置

"plugins": [
[
"import",
{
"libraryName": "iview",
"libraryDirectory": "src/components"
}
]
]
如果您想在 webpack 中按需使用组件，减少文件体积，可以这样写：

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);
提醒：*按需引用仍然需要导入样式，即在 main.js
或根组件执行 import ‘iview/dist/styles/iview.css’;*

注意：尽量使用index.js中的命名，避免使用vue内置的名字，否则会引起错误

vue-ui安装
自定义配置：
此时很多朋友会问了，没有配置文件，那我需要自定义一个配置咋办呢？
莫慌，此时我们只需要在项目根目录新建一个 vue.config.js 文件就能使用自定义配置了

module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '/',
devServer: {
port: 8000
}
}
组件使用规范
a、动态传值，使用 :prop = ''
b、在非 template/render 模式下（例如使用 CDN 引用时），
组件名要分隔（驼峰命名改为烤肉串），例如 DatePicker 必须要写成 date-picker
c、以下组件，在非 template/render 模式下，需要加前缀 i-：
·Button: i-button
·Col: i-col
·Table: i-table
·Input: i-input
·Form: i-form
·Menu: i-menu
·Select: i-select
·Option: i-option
·Progress: i-progress
以下组件，在所有模式下，必须加前缀 i-，除非使用 iview-loader：
·Switch: i-switch
·Circle: i-circle
问题
使用箭头函数this为空,箭头函数会改变this指向

Try changing the iView import statement to the following:

import iView from ‘iview/dist/iview.min’;
Frequently you’ll find that distribution packages contain the production version of the library located within a dist directory. Seeing as the stylesheet is located there, I’d assume the js is there as well.

// likely that the iview js in this directory
import ‘iview/dist/styles/iview.css’;

相关文章
VUE(五)：vue-cli 3.0使用教程
VUE(六)：vue-resource HTTP介绍
VUE(七)：vue使用中的问题
VUE(二)：安装vue-cli
VUE(三)：安装vue-cli 3.x

VUE(四)：引入iview相关推荐

webpack引入iview.css,解决webpack+Vue引入iView找不到字体文件的问题
原因: css-loader后面带了参数modules(打包报错) url-loader后面带了参数name(引入报错) { test: /\.css$/, use: ExtractTextPlugi ...
创建Vue项目以及引入Iview
创建Vue项目以及引入Iview 官方文档 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue i ...
iview构建基本html页面,使用vue-cli创造基于vue.js的iview工程
1.vue-cli 介绍 vue-cli是一个vue.js提供的脚手架,可以快速构造项目结构. vue-cli本身集成了多种项目模板: 1．simple 很少简单,只有一个html页面 2．webp ...
vue项目引入字体图标iconfont
直接将icon下载成图片使用,看此篇一.登入阿里字体图标库选择图标加入购物车下载代码: 解压后,将除了html的文件都复制一份到自己项目assets下: 二.点击打开之前解压的html文件推荐 ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
vue之使用iview插件实现列表展示或table展示
iview学习地址:https://www.iviewui.com/ 1.iview了解: 开发过项目后台管理系统的人都知道,很多数据都是呈一个列表的形式展现给管理员,或者以各种图展现.就比如,用户数 ...
vue中引入高德js
项目概述: 通过在vue中引入高德js,实现地图的加载呈现,以及在地图中实现设备坐标定位,并在设备列表点击的同时进行定位点的切换和地图视图的切换,在点击坐标点的时候可以弹出相关介绍信息. 第一步:在i ...
Vue如何引入第三方js
最近遇到的问题是如何在vue中引入mui.js,通过import引入就报这个错一看就知道mui是传统模式,没有es6的export写法,所以import引用不到,给mui加上export defau ...
BIGEMAP地图VUE中引入
一.获取地图服务器参数 <!DOCTYPE html><html> <head><meta charset='UTF-8' /><meta nam ...
vue中使用iview UI
iview ui是一个强大的ui库基于vue,有很多实用的基础组件比elementui的组件更丰富,这里介绍如何在vue项目中使用iview开发项目.iview自己有一套后台管理模版iview-adm ...

VUE(四)：引入iview

VUE(四)：引入iview相关推荐

最新文章

热门文章