Vuetify按需加载配置

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

执行npm install vuetify –save 或 yarn add 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是必要的。
5.执行yarn add stylus stylus-loader style-loader css-loader –D 或 npm i stylus stylus-loader style-loader css-loader --save-dev，安装按需加载样式引入，在main.js中添加 import ‘vuetify/src/stylus/app.styl’ 引入样式。
6.执行yarn add material-design-icons-iconfont –D 或 npm install material-design-icons-iconfont –D，添加material-icon支持，并在main.js中引入import ‘material-design-icons-iconfont/dist/material-design-icons.css’，如下：

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

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