Vuetify按需加载配置

自己配置vuetify按需加载的步骤，在此记录：

执行npm install --save-dev babel-plugin-transform-imports 或 yarn add babel-plugin-transform-imports添加按需加载支持。
配置.babelrc文件，添加改为如下配置：
"plugins": ["transform-vue-jsx", "transform-runtime",
["transform-imports", {
"vuetify": {
"transform": "vuetify/es5/components/${member}",
"preventFullImport": true
}
}],
["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "~./src/style/theme"
}
]]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
在main.js中（或单独的js文件中引入）添加如下按需加载方式：
import Vuetify, {
VApp, // required
VTabs,
VTab,
VTabItem,
VCard,
VCardText,
VBtn
} from 'vuetify/lib'

Vue.use(Vuetify, {
components: {
VApp,
VTabs,
VTab,
VTabItem,
VCard,
VCardText,
VBtn
}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
其中VApp是必要的。

import Vuetify, {
VApp, // required
VTabs,
VTab,
VTabItem,
VCard,
VCardText,
VBtn
} from 'vuetify/lib'
Vue.use(Vuetify, {
iconfont: 'md'，
components: {
VApp,
VTabs,
VTab,
VTabItem,
VCard,
VCardText,
VBtn
}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

---------------------