vue3自动导入---组件库elements-ui,vuetify以及scss样式的自动导入

自动导入

        我们在使用第三方组件库和css样式文件时,都需要进行引入,可以在单个组件内单独引用,也可以在全局引入或一次引入所有组件;但是,一般情况下我们都不会全部引入,这会是打包的结果变大,而且往往是不可能用上所有的组件,这个时候就需要自动按需引入

自动按需引入:在组件中用来哪个组件,就自动导入哪个文件

以下以vite举例,演示自动导入配置

elements-ui

快速开始 | Element Plus (element-plus.org)

新建一个vue项目,并引入elements-ui组件

npm create vue@latest

npm install element-plus --save

 再安装自动引入插件

npm install -D unplugin-vue-components unplugin-auto-import

可以在package.json中查看安装好的插件

之后在vite.config.js中配置自动导入的插件(注意添加的位置)

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'



AutoImport({
   resolvers: [ElementPlusResolver()],
}),
Components({
   resolvers: [ElementPlusResolver()],
}),

然后就可以在vue组件中直接使用需要的ui组件

 可以看到没有做任何引入,直接就可以使用el-button

所以element-ui自动导入就两步:

  1. 安装自动引入插件
  2. 在vite.config.js中配置自动导入的插件

 vuetify

开始使用 Vuetify 3 — Vuetify (vuetifyjs.com)

vuetify也是一套ui组件,它的风格和组件的动画效果更加生动,但是vuetify的配置会相对麻烦,

安装引入vuetify和自动导入插件

npm i vuetify
npm install vite-plugin-vuetify --save

插件地址: vite-plugin-vuetify - npm (npmjs.com)

安装好vuetify和它的按需引入插件后,可以在package.json中查看,

之后我们来配置引入vuetify

在src下新建一个plugins目录,然后在新建两个js文件,

vuetify.js:

import 'vuetify/styles'
import { createVuetify } from 'vuetify'


const myCustomTheme = {// 自定义主题配置
  light: {
    
  },
  dark: {

  }
}

export default createVuetify({
  defaults: {
    global: {
      ripple: true,// 默认开启波纹效果
    },
    VSheet: {
      elevation: 4,//阴影深度
    },
  },
  theme: {
    defaultTheme: 'light', // 默认主题
    themes: {
      myCustomTheme, // 自定义主题
    }
  }
})

 index.js:

import vuetify from "./vuetify";

export const registerPlugins = (app) => {
  // 注册vuetify
  app.use(vuetify);
}

main.js:

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

import { registerPlugins } from '@/plugins/index'


const app = createApp(App)

registerPlugins(app)// 引入vuetify

app.mount('#app')

到这里就成功引入了vuetify,

然后我们再使用前面下好的插件开启按需引入,vuetify的按需引入配置很简单,

导入插件然后设置autoImport:true即可

import vuetify from 'vite-plugin-vuetify'

vuetify({autoImport: true})

注意代码的位置,这样就成功实现了vuetify的按需引入

也是可以直接使用vuetify组件,而不需要手动导入

 同样vuetify的自动导入也是两步:

  1. 安装自动引入插件
  2. 在vite.config.js中配置

scss样式自动导入

安装scss

npm install sass

在src下新建一个style文件夹和一个scss文件

在vite.config.js中配置自动导入

 

css: {
    preprocessorOptions: {
      // 自动导入,无需手动引用 
      scss: {
        additionalData: `@use "@/style/main.scss" as *;`
      }
    }
  }

这样就想当于在每个组件的style标签中默认添加了这个导入--- `@use "@/style/main.scss" as *;`

可以看到可以在组件中直接使用scss变量,要注意使用scss应该在style标签上添加lang="scss"属性

  • 18
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值