【谷粒学院】014-vue-element-admin

梦里梦外; 2023-10-05 15:26 37阅读 0赞

**目录**

一、vue-element-admin

1、简介

官网地址：

文档地址：

项目地址：

2、安装

二、vue-admin-template

1、简介

项目地址：

建议：

2、安装

三、演示

完整版：

基础版：

--------------------

# 一、vue-element-admin #

## 1、简介 ##

vue-element-admin是基于element-ui 的一套后台管理系统集成方案；

### 官网地址： ###

[https://panjiachen.github.io/vue-element-admin-site/zh/][https_panjiachen.github.io_vue-element-admin-site_zh]

### 文档地址： ###

[https://panjiachen.github.io/vue-element-admin-site/zh/guide/\#功能][https_panjiachen.github.io_vue-element-admin-site_zh_guide]

### 项目地址： ###

[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]

## 2、安装 ##

# 克隆项目
    git clone https://github.com/PanJiaChen/vue-element-admin.git
    
    # 进入项目目录
    cd vue-element-admin
    
    # 安装依赖
    npm install
    
    # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
    npm install --registry=https://registry.npm.taobao.org
    
    # 本地开发 启动项目
    npm run dev

启动完成后会自动打开浏览器访问 [http://localhost:9527][http_localhost_9527]， 你看到下面的页面就代表操作成功了

![e824941c6f74b39529adec66cbe4db36.png][]

# 二、vue-admin-template #

## 1、简介 ##

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发；

### 项目地址： ###

[https://github.com/PanJiaChen/vue-admin-template][https_github.com_PanJiaChen_vue-admin-template]

### 建议： ###

**你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来；**

## 2、安装 ##

（类似vue-element-admin）

# 解压压缩包
    # 进入目录
    cd vue-admin-template-master
    # 安装依赖
    npm install
    # 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
    npm run dev

# 三、演示 #

[http://localhost:9527][http_localhost_9527]

### 完整版： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

### 基础版： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

[https_panjiachen.github.io_vue-element-admin-site_zh]: https://panjiachen.github.io/vue-element-admin-site/zh/
[https_panjiachen.github.io_vue-element-admin-site_zh_guide]: https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD
[https_github.com_PanJiaChen_vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[http_localhost_9527]: http://localhost:9527/
[e824941c6f74b39529adec66cbe4db36.png]: https://img-blog.csdnimg.cn/img_convert/e824941c6f74b39529adec66cbe4db36.png
[https_github.com_PanJiaChen_vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201210092237420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/202012100923105.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70