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：开启按需打包插件
解构赋值加上插件的包体积小；没有插件的打包大小相差无几
当我们用全部导入的形式，开启按需加载插件和不开启打包大小是一样的。
所以推荐 {} 结构赋值 配合 按需导入插件~
所以推荐 {} 结构赋值 配合 按需导入插件~
所以推荐 {} 结构赋值 配合 按需导入插件~
