关于vue.js:vitevueelementplus安装过程遇到的问题

51次阅读

共计 4900 个字符，预计需要花费 13 分钟才能阅读完成。

因为最近忙的差不多了，而且 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。本文的残缺配置将放在这里。

正文完
vue.js
发表至： vue.js
2021-04-06
 0
关于vue.js:vue-拖拽元素指令
关于vue.js:一招解决Vue多页面路由history模式开发到部署
关于vue.js:vue插件从打包到发布npm在到本地安装使用过程
关于vue.js:Vue双向数据绑定原理