Element-UI基础|入门

Element-UI是专为Vue.js框架设计的一套桌面端UI库，提供了丰富的即用型组件，帮助开发者快速搭建美观、功能完善的网页界面。以下是使用Element-UI进行快速入门的步骤指南：

安装Element-UI

1. 前提条件：确保你的开发环境中已经安装了Node.js（推荐使用LTS版本）和Vue CLI。你可以通过运行npm install -g @vue/cli或yarn global add @vue/cli来安装Vue CLI。

2. 创建Vue项目：打开终端或命令提示符，运行以下命令创建一个新的Vue项目。这里我们选择Vue 3的默认设置（Vue CLI会询问你选择Vue版本，确保选择Vue 3）：

   vue create my-element-app
   

   其中my-element-app是你的项目名称，你可以根据需要更改。

3. 进入项目目录：

   cd my-element-app
   

4. 安装Element-UI：Vue 3推荐使用Element Plus，它是Element-UI针对Vue 3的升级版。在项目根目录下运行以下命令安装Element Plus及其Vue 3适配器：

   npm install element-plus --save
   npm install @element-plus/icons-vue --save
   

   或者如果你使用Yarn：

   yarn add element-plus
   yarn add @element-plus/icons-vue
   

在Vue项目中使用Element Plus

1. 全局引入Element Plus：在src/main.js文件中，引入Element Plus并将其添加到Vue的全局原型上：

   import { createApp } from 'vue';
   import App from './App.vue';
   import ElementPlus from 'element-plus';
   import 'element-plus/dist/index.css';
   import * as ElementPlusIconsVue from '@element-plus/icons-vue';
   
   const app = createApp(App);
   
   // 注册Element Plus图标
   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component);
   }
   
   app.use(ElementPlus).mount('#app');
   

2. 在组件中使用Element Plus组件：现在你可以在任何Vue组件中直接使用Element Plus的组件了。例如，在src/App.vue中添加一个按钮组件：

   <template>
     <div id="app">
       <el-button>点击我</el-button>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App',
   };
   </script>
   

开发与构建

• 启动开发服务器：回到终端，运行npm run serve或yarn serve，这将启动一个本地开发服务器，默认情况下访问http://localhost:8080就能看到你的应用。
• 构建生产版本：当准备部署应用时，可以使用npm run build或yarn build命令来生成生产环境的静态文件。