创建 vue 项目

安装vue脚手架

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

构建项目

vue create vue-elementplus-admin

运行项目

cd vue-elementplus-admin
yarn serve

这时就可以访问 http://localhost:8080/ 。

安装引入 Element Plus

yarn add element-plus

在 main.js 中写入以下内容

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/packages/theme-chalk/src/base.scss'
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

然后在 Home.vue 中使用一个 button，页面也同时展示出来了。

<template>
  <div class="home">
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

但是此时是将所有的都引入进来了，所有我们按需引入。

按需引入

借助 babel-plugin-import，我们可以只引入需要的组件，以达到减小项目体积的目的。

yarn add babel-plugin-import -D

将 babel.config.js 修改为：

module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
      },
    ],
  ],
};

修改 main.js 为：

import { createApp } from 'vue'
import { ElButton } from 'element-plus';
import 'element-plus/packages/theme-chalk/src/base.scss';
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.use(store);
app.use(router);
app.mount('#app');

后，我们需要重新运行一下服务 vue 才会去加载新的配置

yarn serve

至此，一个基于 Vue 和 Element Plus 的开发环境已经搭建完毕。