安装 | SHEN YING

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

::: npm-to

1	npm install element-plus --save

:::

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

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

:collapsed-lines

<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项目的方式。

::: steps

步骤 1

使用命令创建vuee-elementplus项目（基于Element Plus）
1
2
3
vue create vue3-elementplus
cd vue3-elementplus
vue add element-plus
步骤 2

根据安装过程进行选择:

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

:collapsed-lines

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

运行项目
1
npm run serve

:::