因为最近忙的差不多了，而且vite据说用起来很快，所以正好当初有闲暇工夫，所以就来尝试一下配置一下vite+vue+elementPlus。注：本文次要是用yarn来安装包，用npm或者cnpm的同学绝对应的切换即可。
开始
关上vite的官网文档，你会看到上面的图。vite中武官网
NPM：npm init @vitejs/appYARN：yarn create @vitejs/app心念念的间接应用yarn create @vitejs/app命令开始常见，后果报错了！
究其原因是因为yarn的安装包默认是在c盘的而我yarn装置在D盘的所以就会报这样的谬误！
yarn global dir解决办法也很简略，就是将yarn的全局门路改一下到D盘就行了，在D盘创立yarn文件夹在文件下创立一个golbal和cache文件夹，当初咱们就能够开始调整yarn的全局装置门路。
yarn config set global-folder "D:\yarn\global"yarn config set cache-folder "D:\yarn\cache"当然这个能够依据大家的装置的不同来扭转。接着就能够开始用官网的命令了。
抉择你本人须要的模板，就能够了，至此一个步骤就实现了。
如果你是最早一批应用vue3的人，你会发现有新惊喜！
没错！这是之前提案要减少的货色，不必写setup函数，也不必导出变量！霎时感觉好爽有没有。提案Github地址
在控制台也能够发现warning。
配置element-plus
配置其实能够参考官网来进行，然而家喻户晓官网的货色也会有不少的坑，所以我还是奉上我的踩坑揭示。
一、装置element-plus
NPM：npm install element-plus --saveYARN：npm add element-plus 接下来就是看你本人的需要了，别离能够进行全量引入或者是按需引入。
二、全量引入
你须要在main.js文件中写入以下内容：
import { createApp } from 'vue'import ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';import App from './App.vue';const app = createApp(App)app.use(ElementPlus)app.mount('#app')即可实现全量引入。
三、按需引入
都晓得全量引入会导致我的项目过大，如果不是所有组件都应用的上的话，还是应用按需引入比拟好。（注：原本次要讲的是vite，按需引入是vite的形式，cli的形式能够参照官网），首先咱们须要装置一个插件： vite-plugin-style-import
yarn add vite-plugin-style-import -D因为element-plus提供Sass预编译的形式，接着咱们须要在我的项目装置上面两个：
yarn add sass sass-loader 接着咱们在 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', resolveStyle: (name) => { name = name.slice(3) // 这里有个彩蛋，官网竟然是用splice的，没错用的是数组办法。 return `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批改为：
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', resolveStyle: (name) => { return `element-plus/lib/theme-chalk/${name}.css`; }, resolveComponent: (name) => { return `element-plus/lib/${name}`; }, } ] }) ]})不晓得你有没有留神到，在Sass的形式引入须要将name切掉前三个的形式引入sass文件，其实间接去node_modules中查看相干目录能够发现，sass文件是没有以el-结尾的，而css文件是以el-结尾的，所以须要切掉前三个。
而后我在src的目录下创立了一个文件夹叫plugins，在文件夹下创立了elementPlus.js文件，接着文件内容如下：
import { 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, ElDrawer, ElDropdown, ElDropdownItem, 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, ElTransfer, ElTree, ElUpload, ElInfiniteScroll, ElLoading, ElMessage, ElMessageBox, ElNotification,} from 'element-plus'const components = [ 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, ElDrawer, ElDropdown, ElDropdownItem, 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, ElTransfer, ElTree, ElUpload,]const plugins = [ ElInfiniteScroll, ElLoading, ElMessage, ElMessageBox, ElNotification,]const option = { size: 'small', zIndex: 3000 }export const useElementPlus = (app) => { // element全局配置 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'import App from './App.vue'import 'element-plus/packages/theme-chalk/src/base.scss'import { useElementPlus } from './plugins/elementPlus.js'const app = createApp(App)useElementPlus(app)app.mount('#app')应该不难理解，就是将vue实例放到useElementPlus办法中，而后在elementPlus文件中实现相干组件以及插件的注册。这样，咱们的main.js文件会更加清晰。至此就实现了所有element-plus的配置。
后续
前面会欠缺退出vuex和vue-router。本文的残缺配置将放在这里。