vite+vue+elementplus安装过程遇到的问题

因为最近忙的差不多了，而且vite据说用起来很快，所以正好现在有空闲时间，所以就来尝试一下配置一下vite+vue+elementPlus。注：本文主要是用yarn来安装包，用npm或者cnpm的同学相对应的切换即可。

开始

打开vite的官方文档，你会看到下面的图。vite中文官网

NPM：
npm init @vitejs/app
YARN：
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 --save
YARN：
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。本文的完整配置将放在这里。