element plus 安装

chenYoper-陈永鹏

已于 2023-09-15 14:28:09 修改

阅读量2.1k

点赞数

于 2023-09-13 23:51:04 首次发布

本文链接：https://blog.csdn.net/chenyoper/article/details/132844177

版权

前端 HTML+JS+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

欢迎关注我的公众号:夜说猫，让一个贫穷的程序员不靠打代码也能吃饭~

零零糖公众号

今天在写一篇教程，涉及到前端部分，想用当前比较流行的前端架构。

选择了element plus。

于是按照element plus官网文档操作，安装了nodejs之后就开始 npm install element-plus --save。

结果就完全进行不下去了，根本就没有main.js啊。

百度之后发现，写的基本上也是跟官网差不多，帮助不大。

没有人带入门，踩的坑确实会比较多。

摸索之后，终于可以进行开发，记录之，以免同行走弯路。

1、使用element plus，需要nodejs环境，然后通过npm先安装vue3，再安装element plus。

2、当然，也可以通过cdn的方式引入——但在公司的实际应用中，这种方式比较少。

所以我们采用第一种方式。

名词速解

nodejs：基于Chrome V8引擎的JavaScript运行环境；

npm：nodejs的包管理器

vue3：前端框架

element plus：vue3 ui框架

一、安装nodejs

官网Node.js下载nodejs，

一路下一步完成安装。

nodejs带有npm，为了使用方便，我们安装cnpm

npm install -g cnpm -registry=https://registry.npm.taobao.org

通过npm操作有时候会卡住，cnpm是中国 npm 镜像的客户端，访问速度更快，不会卡住不动。

二、安装vue3

实际上，我们在安装element plus之前，应该先安装vue3。

vue3文档：简介 | Vue.js

也就是说，先执行：

cnpm create vue@latest

如图：

分别执行：

cd b
cnpm install
cnpm run dev

如图

最后显示可通过http://127.0.0.1:5173/ 访问。浏览器打开之：

显示这个页面，说明安装成功且能访问。

三、安装element plus

element plus文档：设计 | Element Plus

也就是再执行：

cnpm install element-plus --save

如图：

这样，我们就得到一个完整的element-plus项目。

开始用element plus开发

打开element plus 组件文档：Element Plus，我们下面会用到。

1、新建文件TestView.vue

2、从组件文档里随便复制一块代码

往下拉还有一块

3、上面两块代码修改一下，放进TestView.vue文件里，得到

<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>
<template>
  <div class="mb-12">
    <h1>这是一个测试页面</h1>
	<el-row class="mb-12">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>
  </div>
</template>

添加路由，编辑index.tx

添加以下代码

,
    {
      path: '/test',
      name: 'test',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/TestView.vue')
    }

如图：