因为最近比较忙，而且vite据说用的很快，所以现在正好有空，就试试配置vite+vue+elementPlus.注：本文主要使用yarn安装包，使用npm或cnpm的同学可以相应切换。开始打开vite的官方文档，你会看到下图。Vite中文官网npm:npminit@vitejs/appYARN:yarncreate@vitejs/app我刚才直接用yarncreate@vitejs/app命令启动common，结果报错！原因是yarn安装包默认安装在C盘，而我把yarn安装在D盘，所以会报这个错！yarnglobaldir的解决方法也很简单，把yarn的global路径改成D盘，在D盘创建一个yarn文件夹，在文件下创建一个golbal和cache文件夹，现在我们就可以开始调整global了纱线安装路径。yarnconfigsetglobal-folder"D:\yarn\global"yarnconfigsetcache-folder"D:\yarn\cache"当然这个可以根据你的安装来改变。然后就可以开始使用官方命令了。只需选择您需要的模板，仅此而已，一步完成。如果你是第一批使用vue3的人，你会发现新的惊喜！这是正确的！这是之前提案中要加的东西，不用写setup函数，也不用导出变量！是不是瞬间心情大好？该警告也可以在提案Github地址的控制台中找到。element-plus的配置其实可以参考官网进行配置，但是大家都知道官网的坑很多，所以还是奉上我的踩坑提醒。1.安装element-plusnpm:npminstallelement-plus--saveYARN:npmaddelement-plus接下来就看自己的需求了，可以全量导入，也可以按需导入。2、全量导入需要在main.js文件中写入如下内容：import{createApp}from'vue'importElementPlusfrom'element-plus';import'element-plus/lib/theme-chalk/index.css';从'./App.vue'导入App;constapp=createApp(App)app.use(ElementPlus)app.mount('#app')完成完全导入。3.按需导入。我们都知道全量导入会导致项目过大。如果不是所有组件都用到，最好使用按需导入。（注：本来我们主要讲的是vite，按需导入是vite的方式，cli的方式可以参考官网。）首先，我们需要安装一个插件：vite-plugin-style-importyarnaddvite-plugin-style-import-D因为element-plus提供了Sass预编译，那么我们需要在项目中安装如下两个：yarnaddsasssass-loader然后我们修改vite.config.js文件为如下：import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importstyleImportfrom'vite-plugin-style-import'exportdefaultdefineConfig({plugins:[vue(),styleImport({libs:[{libraryName:'element-plus',resolveStyle:(name)=>{name=name.slice(3)//这里有个彩蛋，官网居然用了splice，没错就是用数组的方式。返回`element-plus/packages/theme-chalk/src/${name}.scss`；},resolveComponent:(name)=>{return`element-plus/lib/${name}`;},}]})]})同时需要在main.js中引入如下import'element-plus/packages/theme-chalk/src/base.scss'如果你的项目没有应用Sass，比较简单，直接在vite.config.js中修改为：{plugins:[vue(),styleImport({libs:[{libraryName:'element-plus',resolveStyle:(name)=>{return`element-plus/lib/theme-chalk/${name}.css`;},resolveComponent:(name)=>{return`element-plus/lib/${name}`;},}]})]})不知道大家有没有注意到Sass的引入需要裁剪关闭前三个名字引入sass文件。其实直接去node_modules里面查看相关目录，可以发现sass文件不是el-开头的，而css文件是el-开头的，所以需要把前三个砍掉。然后我在src目录下创建了一个叫plugins的文件夹，在文件夹下创建了elementPlus.js文件，然后文件内容如下：,ElButton,ElButtonGroup,ElCalendar,ElCard,ElCarousel,ElCarouselItem,ElCascader,ElCascaderPanel,ElCheckbox,ElCheckboxButton,ElCheckboxGroup,ElCol,ElCollapse,ElCollapseItem,ElCollapseTransition,ElColorPicker,ElContainer,ElDatePicker,ElDialog,ElDivider,ElDrawer,ElDroopterMedropdown,ElDropdownItemDrawer,ElForm,ElFormItem,ElHeader,ElIcon,ElImage,ElInput,ElInputNumber,ElLink,ElMain,ElMenu,ElMenuItem,ElMenuItemGroup,ElOption,ElOptionGroup,ElPageHeader,ElPagination,ElPopconfirm,ElPopover,ElPopper,ElProgress,ElRadio,ElRadioButton,ElRadioGroup,ElRate,ElRow,ElScrollbar,ElSelect,ElSlider,ElStep,ElSteps,ElSubmenu,ElSwitch,ElTabPane、ElTable、ElTableColumn、ElTabs、ElTag,ElTimePicker,ElTimeSelect,ElTimeline,ElTimelineItem,ElTooltip,ElTransfer,ElTree,ElUpload,ElInfiniteScroll,ElLoading,ElMessage,ElMessageBox,ElNotification,}来自'element-plus'常量组件=[ElAlert,ElAside,ElAutocomplete,ElAvatar,ElBacktop,ElBadge、ElBreadcrumb、ElBreadcrumbItem、ElButton、ElButtonGroup、ElCalendar、ElCard、ElCarousel、ElCarouselItem、ElCascader、ElCascaderPanel、ElCheckbox、ElCheckboxButton、ElCheckboxGroup、ElCol、ElCollapse、ElCollapseItem、ElCollapseTransition、ElColorPicker、ElContainer、ElDatePicker、ElDialog、ElDivider、ElDivider,ElDropdownMenu,ElFooter,ElForm,ElFormItem,ElHeader,ElIcon,ElImage,ElInput,ElInputNumber,ElLink,ElMain,ElMenu,ElMenuItem,ElMenuItemGroup,ElOption,ElOptionGroup,ElPageHeader,ElPagination,ElPopconfirm,ElPopover,ElPopper,ElProgress,ElRadio,ElRadioButton,ElRadioGroup、ElRate、ElRow、ElScrollbar、ElSelect、ElSlider、ElStep、ElSteps、ElSubmenu、ElSwitch、ElTabPane、ElTable、ElTableColumn、ElTabs、ElTag、ElTimePicker、ElTimeSelect、ElTimeline、ElTimelineItem、ElTooltip、ElTimelineItem、ElTooltip、ElConn、Trugins、Trugins、transfer=[ElInfiniteScroll,ElLoading,ElMessage,ElMessageBox,ElNotification,]constoption={size:'small',zIndex:3000}exportconstuseElementPlus=(app)=>{//元素全局配置app.config.globalProperties.$ELEMENT=option//组件注册components.forEach((component)=>{app.component(component.name,component)})//插件注册plugins.forEach((plugin)=>{app.use(plugin)})}注意，这个文件我其实是完整导入的，我是根据自己的需要修改的。同时值得一提的是，我在这个文件中导出了一个useElementPlus方法。然后回到main.js，内容如下：import{createApp}from'vue'importAppfrom'./App.vue'import'element-plus/packages/theme-chalk/src/base.scss'import{useElementPlus}from'./plugins/elementPlus.js'constapp=createApp(App)useElementPlus(app)app.mount('#app')应该不难理解，就是把vue实例放在使用ElementPlus方法，然后在elementPlus文件中完成相关组件和插件的注册。这样，我们的main.js文件会更干净。至此，element-plus的所有配置都已经完成。后续会完善添加vuex和vue-router。本文的完整配置将放在此处。
