Vue开发那些事——iview导入，使用，以及常见问题

npm 安装ivew ——$ npminstalliview--save

引入 iView

#

一般在 webpack 入口页面main.js中如下配置：

importVuefrom'vue';importVueRouterfrom'vue-router';importAppfrom'components/app.vue';// 路由挂载importRoutersfrom'./router.js';// 路由列表importiViewfrom'iview';import'iview/dist/styles/iview.css';// 使用 CSSVue.use(VueRouter);Vue.use(iView);// 路由配置constRouterConfig = {    routes: Routers};constrouter =newVueRouter(RouterConfig);newVue({    el:'#app',    router: router,    render: h => h(App)});

按需引用

#

如果您想在 webpack 中按需使用组件，减少文件体积，可以这样写：

importCheckboxfrom'iview/src/components/checkbox';

特别提醒

#

按需引用仍然需要导入样式，即在main.js或根组件执行import 'iview/dist/styles/iview.css';

按需引用是直接引用的组件库源代码，需要借助 babel 进行编译，以 webpack 为例：

module: {    rules: [        { test:/iview.src.*?js$/, loader:'babel-loader'},        { test:/\.js$/, loader:'babel-loader', exclude:/node_modules/}    ]}

组件使用规范

#

使用:prop传递数据格式为 数字、布尔值或函数时，必须带:(兼容String除外，具体看组件文档)，比如：

正确的使用方法：错误的使用方法：

在非 template/render 模式下（例如使用 CDN 引用时），组件名要分隔，例如DatePicker必须要写成date-picker。

以下组件，在非 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

iview 打包之后 找不到自带的icon图片，而且路径重复

报错提示的路径：/dist/static/css/static/fonts/ionicons.24712f6.ttf

在 build/webpack.prod.conf.js 中,将

module: {rules: utils.styleLoaders({      sourceMap: config.build.productionSourceMap,      extract: false    })  },

里边的 extract改为false,默认是true

详见这个issue:https://github.com/iview/ivie...