Element Plus做一个页面

步骤 1: 创建Vue项目

如果你还没有创建Vue项目，可以使用Vue CLI或Vite来创建一个。这里我将展示如何使用Vite创建项目，因为Vite是Vue 3的官方推荐工具。

 

 

npm create vite@latest my-vue-app -- --template vue

cd my-vue-app

npm install

步骤 2: 安装Element Plus

在项目目录中，安装Element Plus：

 

 

npm install element-plus

步骤 3: 在项目中引入Element Plus

你可以在main.js或main.ts文件中全局引入Element Plus，或者仅在需要的组件中按需引入。

全局引入

 

 

import { createApp } from 'vue'

import App from './App.vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

 

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

按需引入（使用babel-plugin-component）

首先，安装babel-plugin-component：

 

 

npm install babel-plugin-component -D

然后，在.babelrc或babel.config.js中配置：

 

 

{

"plugins": [

[

"component",

{

"libraryName": "element-plus",

"styleLibraryName": "theme-chalk"

}

]

]

}

之后，你可以在组件中按需引入Element Plus的组件：

 

 

import { ElButton } from 'element-plus';

 

export default {

components: {

ElButton,

},

}

步骤 4: 创建一个页面并使用Element Plus组件

在你的Vue组件中，你可以使用Element Plus的组件来构建页面。例如，创建一个简单的按钮：

 

 

<template>

<el-button type="primary">点击我</el-button>

</template>

 

<script>

import { ElButton } from 'element-plus'; // 如果你是按需引入的，需要这一行

export default {

components: { ElButton }, // 如果你是按需引入的，需要这一行来注册组件，如果是全局引入则不需要这行代码。

}

</script>

步骤 5: 运行你的应用

运行你的Vue应用：

 

npm run dev

现在，你应该能够在浏览器中看到一个带有Element Plus按钮的页面了。通过这种方式，你可以利用Element Plus快速构建出美观且功能丰富的Vue应用界面。记得探索Element Plus提供的更多组件和功能，以满足你的开发需求。