vue-element-admin 使用

一、vue-element-admin 

1、简介

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

功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

项目在线预览：https://panjiachen.gitee.io/vue-element-admin

 

 

 

 

 

 

2、解压文件到工作区安装

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

 

二、vue-admin-template-master

1、简介

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

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

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

2、安装

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

一、项目的创建和基本配置

 

1、创建项目

 

将vue-admin-template-master重命名为XXXXXXX

 

2、修改项目信息

 

package.json

{
    "name": "xxxxx",
    ......
    "description": "XXXX管理系统",
    "author": "Helen <XXXXXX@qq.com>",
    ......
}

3、如果需要修改端口号

config/index.js中修改

port: 9528

4、项目的目录结构

. 
├── build // 构建脚本
├── config // 全局配置 
├── node_modules // 项目依赖模块
├── src //项目源代码
├── static // 静态资源
└── package.jspon // 项目信息和依赖配置

src 
├── api // 各种接口 
├── assets // 图片等资源 
├── components // 各种公共组件，非公共组件在各自view下维护 
├── icons //svg icon 
├── router // 路由表 
├── store // 存储 
├── styles // 各种样式 
├── utils // 公共工具，非公共工具，在各自view下维护 
├── views // 各种layout
├── App.vue //***项目顶层组件*** 
├── main.js //***项目入口文件***
└── permission.js //认证入口

 

 

 

 

 

 

 

 

 

5、运行项目

npm run dev

 注意：

 

打开 config/index.js，配置是否开启语法检查

useEslint: true,

 

建议关闭，检查比较严格