Element-plus

Vue3升级后需要使用Element-plus版本

npm install element-plus --save

全局引入

在main入口文件中全局引入

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import elementFun from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';
import router from './router'
let app = createApp(App)
app.use(elementFun)
app.use(router).mount('#app')

引入插件 在app上注册；引入css样式；

<template >
  <div class="container">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>
<script>
export default {};
</script>
<style  scoped>
</style>

可以在实例插件的时候定义element的全局属性；

该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import elementFun from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';
import router from './router'
let app = createApp(App)
app.use(elementFun, { size: 'small', zIndex: 3000 });
app.use(router).mount('#app')

按需引入

main

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import 'element-plus/lib/theme-chalk/index.css';
import router from './router'
import { ElButton, ElAlert } from 'element-plus'
let app = createApp(App)
app.use(ElButton)
app.use(ElAlert)
app.use(router).mount('#app')

配置按需引入

下载

 npm install vite-plugin-style-import -D

将 vite.config.js 修改为：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
    plugins: [
        vue(),
        styleImport({
            libs: [
                {
                    libraryName: 'element-plus',
                    esModule: true,
                    ensureStyleFile: true,
                    resolveStyle: (name) => {
                        return `element-plus/lib/theme-chalk/${name}.css`;
                    },
                    resolveComponent: (name) => {
                        return `element-plus/lib/${name}`;
                    },
                }
            ]
        })
    ]
})

我这里vite版本是"vite": “^2.3.0”, 本来使用的1.x.x的版本发现没defineConfig 这个方法。在学习的过程中，还是一位大佬给我确定了版本号问题~

Vant

下载依赖

npm i vant@next -S

全局引入
main

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import 'element-plus/lib/theme-chalk/index.css';
import router from './router'
import { ElButton, ElAlert } from 'element-plus'
import Vant from 'vant';
import 'vant/lib/index.css';
let app = createApp(App)
app.use(Vant)
app.use(ElButton)
app.use(ElAlert)
app.use(router).mount('#app')

引入 vant css 在app上注册

按需引入

// 原始代码
import { Button } from 'vant';
// 编译后代码
import Button from 'vant/es/button';
import 'vant/es/button/style';

按需引入vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
    plugins: [
        vue(),
        styleImport({
            libs: [
                {
                    libraryName: 'element-plus',
                    esModule: true,
                    ensureStyleFile: true,
                    resolveStyle: (name) => {
                        return `element-plus/lib/theme-chalk/${name}.css`;
                    },
                    resolveComponent: (name) => {
                        return `element-plus/lib/${name}`;
                    },
                },
                {
                    libraryName: 'vant',
                    esModule: true,
                    resolveStyle: (name) => `vant/es/${name}/style`,
                },
            ]
        })
    ]
})

Tips: 配置按需引入后，将不允许直接导入所有组件。

总结 ：
全部引入
import xxx from ‘xxx’ app.use(xxx)
按需引入 需要配合插件 vite.comfig.js 配置按需引入
import {xxx } from ‘xxx’ app.use(xxx)
配合vite.config.js配置，项目会自动解析成按需引入

想实现按需引入 按需引入 加 vite.config.js 配置

打包0：开启按需打包插件

打包1：开启按需打包插件


的打包2：不开启按需打包插件

打包3：开启按需打包插件

解构赋值加上插件的包体积小；没有插件的打包大小相差无几

当我们用全部导入的形式，开启按需加载插件和不开启打包大小是一样的。

所以推荐 {} 结构赋值 配合 按需导入插件~
所以推荐 {} 结构赋值 配合 按需导入插件~
所以推荐 {} 结构赋值 配合 按需导入插件~