element-plus初体验

  |   0 评论   |   0 浏览

背景

Ant Design Pro是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案。

element-plus是另一个基于Vue 3的组件库。

本文体验一下element plus。

初体验

第一个demo

纯html文件

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
  </head>
  <body>
    <div id="app">
      <el-button>{{ message }}</el-button>
    </div>
    <script>
      const App = {
        data() {
          return {
            message: "Hello Element Plus",
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>

环境准备

安装npm, cnpm和vue。

sudo apt-get install npm
sudo npm install cnpm -g --registry=https://registry.npmmirror.com
sudo npm install -g @vue/cli

创建vue3项目

创建一个项目，选择vue3

vue create todo-vue3

启动服务，确认vue3包正常

$ cd todo-vue3
$ npm run serve

创建element-plus项目

安装 element-plus

cnpm install element-plus --save

增加一个element-plus控件做测试

修改 src/main.js文件，引入element-plus，如下：

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue'

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

修改src/App.vue，增加一个el-button，如下：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <el-button type="primary" icon="el-icon-search">搜索</el-button>
</template>

测试运行

npm run serve

发布

npm run build

参考