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...
网友评论