Vuetify按需加载配置

Posted 2022-04-17 ly570

自己配置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

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