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

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