vue+webpack+nut-ui

vue+webpack+nut-ui

vue+webpack+nut-ui

1. yarn add @nutui/nutui

2. 按需加载

3. 首先安装 npm i @nutui/babel-plugin-separate-import -D

4. 然后配置一下babel的配置文件

5. { "plugins": [ ["@nutui/babel-plugin-separate-import", { "style": "css" }] ] }

6. import Vue from 'vue'; import { Dialog,Picker } from '@nutui/nutui'; Dialog.install(Vue); Picker.install(Vue);

7.如果需要按需加载 scss 文件（如需要自定义主题）时，除了需要把 style 选项值设为为 scss 外，还需要修改 webpack 配置文件的 sass-loader 配置，如下所示： { loader: 'sass-loader', options: { data: `@import "@nutui/nutui/dist/styles/index.scss"; ` } }

8.vue.config.js VueCLI3 配置方式

module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项 scss: { // @/ 是 src/ 的别名 // 注意：在 sass-loader v7 中，这个选项名是 "data" prependData: ` @import "@/assets/custom_theme.scss"; @import "@nutui/nutui/dist/styles/index.scss"; `, } }, }