阅读 1239

vue-admin-template创建项目与熟悉目录

vue-element-admin

一. 介绍

vue-element-admin是基于vue技术栈的后台系统社区解决方案 , 是开发后台管理系统的一个比较完备的前端解决方案, 可以快速搭建企业级中后台产品原型

  • 基于 vueelement-ui实现
  • 内置了 i18 国际化解决方案,动态路由,权限验证
  • 提炼了典型的业务模型
  • 提供了丰富的功能组件
  • 内部集成了PC项目中很多的业务场景和功能

官网地址 : https://panjiachen.gitee.io/vue-element-admin-site/zh/

线上demo地址 : https://panjiachen.github.io/vue-element-admin/#/dashboard

二. 本地运行

1. 拉取项目代码

// git clone https://github.com/panjiachen/vue-element-admin.git  # 从github上拉取代码
$ git clone https://gitee.com/mirrors/vue-element-admin.git # 从码云上拉取
$ cd vue-element-admin # 切换到具体目录下
$ npm install  # 安装所有依赖
$ npm run dev  # 启动开发调试模式  查看package.json文件的scripts可知晓启动命令
复制代码

2. 下载过慢问题解决

2.1 git clone 速度过慢或者报错

可以直接下载代码的压缩包运行 : gitee.com/mirrors/vue…

2.2 安装依赖特别慢

可以使用淘宝镜像:npm config set registry https://registry.npm.taobao.org

如果使用yarn下载安装包,就请一直使用yarn,而不要与npm 混在一起使用

3. 小结

vue-element-admin 内置了后台管理业务场景下大部分的解决方案,我们可以在左侧的导航栏里看到它们。这些方案不是每一个项目都需要的,如果我们实际的业务中需要,可以拿来参考,所以它起到的作用更多的是一个参考价值,而不适合直接使用进行二次开发

vue-admin-template

官方文档 : https://github.com/PanJiaChen/vue-admin-template

vue-element-admin是一个非常全面的系统,提供了很多现成的方案,我们可以在写项目的时候过来参考,但是也有缺点:不太好进行二次开发,因为要删减的东西太多了。

我们可以采取另外一个子系统,叫做vue-admin-template ,它提供了最基础的模板,非常方便来做二次开发

在线运行效果:panjiachen.gitee.io/vue-admin-t…

1. 拉取代码

$ git clone https://gitee.com/panjiachen/vue-admin-template.git # 从码云拉取代码 
$ cd vue-admin-template #切换到具体目录下
$ npm install  #安装所有依赖
$ npm run dev  #启动开发调试模式  查看package.json文件的scripts可知晓启动命令
复制代码
  1. vue-admin-template是在vue-element-admin的基础上做了大量的删减,只保留了后台管理系统最关键的框架部分,非常适合我们在此基础上做二次开发
  2. 市面上使用vue技术栈开发的PC后台管理项目很大一部分都是基于vue-admin-template 进行的二次开发,我们的人资项目也基于它来实现。
  3. 克隆仓库代码时,可能网络不好,可以直接CV

2. 创建本地项目并关联远程仓库

image-20210509172150628.png

将vue-admin-template项目改成我们自己的项目,并关联到远程仓库进行管理

2.1 本地项目初始化

由于我们前边下载的项目是直接从 vue-admin-template **克隆**而来,里面拥有原项目的提交记录,为了避免冲突,我们要先删除掉之前的提交,再做初始化。

步骤有三步:

  1. 先将vue-admin-template下原来的**.git**文件夹删除掉 (这个文件夹默认情况下是隐藏的,如果你看不到这个文件夹,则需要去设置一下显示隐藏文件夹)

  2. 修改项目信息

    1. 重命名项目文件夹,把vue-admin-template的改成vue-hr(或者其它的名字)
    2. 修改package.json中的说明。
  3. 项目进行git初始化

    $ git init  # 初始化项目, 这句命令会新建一个.git文件夹
    $ git add . # 将修改添加到暂存
    $ git commit -m "人资项目初始化" # 将暂存提到本地仓库
    复制代码

经过上面的步骤,它就变成我们自己的项目了

2.2 建立远程仓库

在gitee上创建一个与本地同名的、 空的 、公开的远程仓库

image-20210413101405278.png

2.3 推送到远程仓库

有两句命令(并不需要记忆,在gitee空仓库中会有具体的提示)

  1. 建立关联
$ git remote add origin <远程仓库地址>  #添加远程仓库地址
# git remote add origin https://gitee.com/用户名/项目名.git
复制代码
  1. 推送master分支到远程仓库
$ git push -u origin master
#将master分支推送到origin所代表的远程仓库地址
复制代码

3. 认识vue-admin-template的目录

一般进入公司后,会有一段时间(1周左右)来熟悉项目

认识vue-admin-template的目录

3.1 认识目录结构

本项目已经生成了一个基本的开发框架,提供了涵盖中后台开发的各类功能和现成目录,下面是整个项目的目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据,在接口服务器没有就绪时,临时充当接口
├── public                     # 静态资源
│   ├── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源  不会参与打包  直接直出
│   ├── components             # 全局公用组件 和业务不相关  上传组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout 负责搭建项目的整体架子结构 html结构
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理 vuex管理数据的位置 模块化开发 全局getters
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法 request.js
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面 路由级别的组件
│   ├── App.vue                # 入口页面 根组件
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintignore              # eslint 忽略文件
├── .eslintrc.js               # eslint 配置项
├── .gitignore                 # git 忽略文件
├── .travis.yml                # 自动化CI配置
├── .babel.config.js           # babel-loader 配置
├── jest.config.js             # 测试配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json
复制代码

此时,你可能会眼花缭乱, 因为生成的目录里面有太多的文件,但是我们要有个基本的认知:

  • src目录:在做项目时,最关注的就是**src**目录, 里面是所有的源代码和资源
  • 非src目录:一般都是对项目的环境和工具的配置

3.2 认识src目录

├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件
复制代码

3.3 熟悉项目的运行机制

整体运行方式

image-20210510102202718.png

重点文件

main.js

main.js是整个项目的入口文件(webpack中学习的入口文件)

main.png

App.vue

App.vue是根组件

image-20210509201019583.png

permission.js (先把内容注释掉)

permission.js 是控制页面登录权限的文件,在main.js中引入了它

image-20210509203048844.png

此处的代码没有经历构建过程会很难理解, 所以先将此处的代码进行注释,等我们构建权限功能时,再从0到1进行构建

permission.png

settings.js

对于一些项目信息的配置,里面有三个属性 :

title(项目名称)

fixedHeader(固定头部)

sidebarLogo(显示左侧菜单logo), settings.js中的文件在其他的位置会引用到,我们不用动它

Vuex(把user.js内容注释掉)

当前的Vuex结构采用了模块形式进行管理共享状态,其架构如下

vuex.png

其中app.js模块和settings.js模块,功能已经完备,不需要再进行修改 , user.js模块是我们后期需要重点开发的内容,所以这里我们将user.js里面的内容删除,并且导出一个默认配置

store/modules/user.js

export default {
  namespaced: true,
  state: {},
  mutations: {},
  actions: {}
}
复制代码
scss

该项目还使用了scss作为css的扩展语言,在styles目录下,我们可以发现scss的相关文件

icons

图标字体使用,icons的结构如下

icon.png

文章分类
前端
文章标签