java工程如何使用ivew_iview 按需引入

安装

npm install iview -D

全部引入

import iView from 'iview';

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

Vue.use(iView);

简单使用

Primary

export default {

name: 'App',

data() {

return {

value: 2

}

},

methods: {

click() {

this.$Message.info('This is a info tip');

}

}

}

.main {

width: 100vw;

height: 100vh;

}

全部引入文件太大，可以使用按需引入的方式

安装插件

cnpm install babel-plugin-import -D

修改配置，完整配置如下

{

"presets": [

[

"env",

{

"modules": false,

"targets": {

"browsers": [

"> 1%",

"last 2 versions",

"not ie <= 8"

]

}

}

],

"stage-2"

],

"plugins": [

"transform-vue-jsx",

"transform-runtime",

[

"import",

{

"libraryName": "iview",

"libraryDirectory": "src/components"

}

]

]

}

按需引入

import {Button, Rate} from 'iview';

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

Vue.component(Button.name, Button);

Vue.component(Rate.name, Rate);

Message组件引入

import {Message} from 'iview'

Message.info("simple hello ")

相当有效的减少了文件大小，只有几kb

会出现字体失效的问题

一、修改webpack.prod.conf.js

1 module: {

2 rules: utils.styleLoaders({

3 sourceMap: config.build.productionSourceMap,

4 extract: false

5 })

6 },

extract:true改为false即可

转载至链接:https://my.oschina.net/ahaoboy/blog/1835340