【谷粒学院】015-前端：框架介绍、创建项目、修改项目、路由分析

╰半橙微兮° 2023-10-05 15:26 24阅读 0赞

**目录**

一、前言

二、项目结构介绍

1、总览

2、前端框架入口

3、框架实现

三、创建项目

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

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

第三步：运行项目

四、对项目进行一些修改

1、修改登录页

2、修改index.html标题

3、国际化设置

4、icon

5、导航栏文字

效果：

6、面包屑文字

效果：

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

1、入口文件中调用路由

2、路由模块中定义路由

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

# 一、前言 #

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

# 二、项目结构介绍 #

## 1、总览 ##

├── build                      # 构建相关
    ├── mock                       # 项目mock 模拟数据
    ├── plop-templates             # 基本模板
    ├── public                     # 静态资源
    │   │── favicon.ico            # favicon图标
    │   └── index.html             # html模板
    ├── src                        # 源代码
    │   ├── api                    # 所有请求
    │   ├── assets                 # 主题 字体等静态资源
    │   ├── components             # 全局公用组件
    │   ├── directive              # 全局指令
    │   ├── filters                # 全局 filter
    │   ├── icons                  # 项目所有 svg icons
    │   ├── 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配置
    ├── vue.config.js              # vue-cli 配置
    ├── postcss.config.js          # postcss 配置
    └── package.json               # package.json

## 2、前端框架入口 ##

index.html

main.js

## 3、框架实现 ##

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

# 三、创建项目 #

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

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

package.json

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

### 第三步：运行项目 ###

npm run dev

截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

# 四、对项目进行一些修改 #

## 1、修改登录页 ##

<div class="title-container">
            <h3 class="title">谷粒学院后台管理系统</h3>
        </div>
        
    
    
        
        <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
            登录
        </el-button>

## 2、修改index.html标题 ##

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

## 3、国际化设置 ##

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

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

## 4、icon ##

复制 favicon.ico 到根目录

## 5、导航栏文字 ##

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

### 效果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

## 6、面包屑文字 ##

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

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

### 效果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

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

## 1、入口文件中调用路由 ##

src/main.js

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

## 2、路由模块中定义路由 ##

src/router/index.js

......
    export const constantRouterMap = [
        ......
    ]
    export default new Router({
        ......
        routes: constantRouterMap
    })

[014-vue-element-admin]: https://blog.csdn.net/qq_29689343/article/details/110945920
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020121010105360.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/20201210113409231.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 2]: https://img-blog.csdnimg.cn/20201210115258615.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70