Vue学习三：element-plus组件和FontAwesome图标组件

码喽7号2026-03-31 9:29

在项目文件目录输入cmd命令来下载element组件

复制代码

npm install element-plus --save

在传输项目时，由于node_modules包体量巨大，所以在传输时一般不会将此包打包，只需要保留package.json。然后在拿到该文件后，在终端中输入⬇️命令vscode便会自动根据依赖开始安装对应的node_modules文件

复制代码

npm install

安装好依赖后，在main.js引入包以及全局定义element组件。

复制代码

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

然后在components包中创建自己的组件，在新建组件导入自己想要的组件，比如element中的基础表格：

然后复制js源码贴入示例组件中

在App.vue中引入组件以及创建标签。

终端输入npm run serve后点击主页链接即可查看：

想要在项目中导入图标可以使用font这个第三方库，先在cmd中安装

复制代码

npm install font-awesome

Font Awesome，一套绝佳的图标字体库和CSS框架

然后在main.js中引入并创建全局声明组件

复制代码

import 'font-awesome/css/font-awesome.min.css'

然后直接把对应的标签复制粘贴在自己需要的地方即可（template标签层中）

还有其他的图标推荐：

iconfont-阿里巴巴矢量图标库