【ElementPlus】1.安装

发表于 更新于 分类于 ，

Element Plus提供了三种包管理器来安装：

1
npm install element-plus --save

安装成功后可以在package.json文件中看到相关依赖。当前，Element Plus还处在beta版本的开发当中。

除了包管理安装，还可以使用CDN直接引用来使用Element Plus。

:collapsed-lines
1
2
3
4
5
6
7
8
<head>
  <!-- 导入样式 -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- 导入 Vue 3 -->
  <script src="//unpkg.com/vue@next"></script>
  <!-- 导入组件库 -->
  <script src="//unpkg.com/element-plus"></script>
</head>

根据官方文档也可以使用手动引入。

这里就来讲一下使用插件Element Plus Vue Cli plugin来快速搭建Element Plus项目的方式。

  1. 步骤 1

    使用命令创建vuee-elementplus项目（基于Element Plus） 

    1
    2
    3
    vue create vue3-elementplus
    cd vue3-elementplus
    vue add element-plus

  2. 步骤 2

    根据安装过程进行选择: 20250226002623

  3. 步骤 3 在项目根目录创建一个vue.config.js文件

    :collapsed-lines
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const HOST = process.env.HOST;
     
    module.exports = {
      publicPath: "./",
      productionSourceMap: false,
      devServer: {
        host: HOST || "0.0.0.0",
        open: true,
        historyApiFallback: true,
        allowedHosts: 'all',
        client: {
          webSocketURL: 'ws://0.0.0.0:8080/ws',
        }
      },
    };

  4. 步骤 4

    运行项目 

    1
    npm run serve