【谷粒学院】015

【谷粒学院】015

一、前言

继【谷粒学院】014-vue-element-admin之后，我们项目环境已经搭建好了！

二、项目结构介绍

1、总览

代码语言：javascript代码运行次数：0运行复制

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── ic                  # 项目所有 svg ic
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── js              # vue-cli 配置
├── js          # postcss 配置
└── package.json               # package.json

2、前端框架入口

index.html

main.js

、框架实现

前端页面环境使用框架，主要基于两种技术实现出来：vue-admin-template = vue + elemrnt-ui；

三、创建项目

第一步：将vue-admin-template-master重命名为edu-admin

第二步：修改项目配置信息

package.json

代码语言：javascript代码运行次数：0运行复制

{
	"name": "edu-admin",
	......
	"description": "谷粒学院后台管理系统",
	"author": "Helen <55172@qq>",
	......
}

第三步：运行项目

代码语言：javascript代码运行次数：0运行复制

npm run dev

截图：

四、对项目进行一些修改

1、修改登录页

代码语言：javascript代码运行次数：0运行复制

    <!--6行-->    
    <div class="title-container">
        <h class="title">谷粒学院后台管理系统</h>
    </div>
    


    <!--44行-->
    <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:0px;" @prevent="handleLogin">
        登录
    </el-button>

2、修改index.html标题

代码语言：javascript代码运行次数：0运行复制

<title>谷粒学院后台管理系统</title>

、国际化设置

打开 src/main.js（项目的js入口），第7行，修改语言为 zh-C，使用中文语言环境，例如：日期时间组件

代码语言：javascript代码运行次数：0运行复制

import locale from 'element-ui/lib/locale/lang/zh-C' // lang i18n

4、icon

复制 favicon.ico 到根目录

5、导航栏文字

位置：hello\edu-admin\src\layout\components\avbar.vue

代码语言：javascript代码运行次数：0运行复制

    <div class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/">
            <el-dropdown-item>
              首页
            </el-dropdown-item>
          </router-link>
          <a target="_blank" href="/">
            <el-dropdown-item>开源地址</el-dropdown-item>
          </a>
          <a target="_blank" href="/">
            <el-dropdown-item>文档</el-dropdown-item>
          </a>
          <el-dropdown-item divided @="logout">
            <span style="display:block;">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

效果：

6、面包屑文字

位置：hello\edu-admin\src\components\Breadcrumb\index.vue

代码语言：javascript代码运行次数：0运行复制

matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)

效果：

五、后台系统路由实现分析

1、入口文件中调用路由

src/main.js

代码语言：javascript代码运行次数：0运行复制

......
import router from './router' //引入路由模块
......
new Vue({
    el: '#app',
    router, //挂载路由
    store,
    render: h => h(App)
})

2、路由模块中定义路由

src/router/index.js

代码语言：javascript代码运行次数：0运行复制

......
export ct ctantRouterMap = [
    ......
]
export default new Router({
    ......
    routes: ctantRouterMap
})

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除前往查看路由配置前端后台框架