Vue.js - 06 安装、使用 Element，基于 Vue.js 2.x

原创

已于 2023-06-16 15:46:37 修改 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #npm

于 2022-06-06 22:26:21 首次发布

本文介绍了如何在基于 Vue.js 2.x 的项目中安装和使用 Element UI。首先，展示了在 Ubuntu 环境下，通过 npm 命令安装 Element 的过程，接着详细说明了在 main.js 文件中引入 Element UI 及其样式，以及在组件中使用 Element 的按钮组件并绑定事件。最后，提供了官方文档的参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境

Ubuntu 版本信息：

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 22.04 LTS
Release:	22.04
Codename:	jammy

Node.js 和 NPM 版本信息：

$ node --version
v16.15.0
$ npm --version
8.5.5

VS Code 版本信息：

Version: 1.66.2
Commit: dfd34e8260c270da74b5c2d86d61aee4b6d56977
Date: 2022-04-11T07:49:24.808Z
Electron: 17.2.0
Chromium: 98.0.4758.109
Node.js: 16.13.0
V8: 9.8.177.11-electron.0
OS: Linux x64 5.15.0-27-generic

安装 Element

该项目基于：Vue.js - 05 使用 Vue CLI 新建项目，基于 Vue.js 2.x

未安装 Element 之前，原 package.json 文件：

{
   
   
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
   
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
   
   
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
   
   
    "@babel/core": "^7.12.16",