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

目录

一、前言

二、项目结构介绍

1、总览

2、前端框架入口

3、框架实现

三、创建项目

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

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

第三步：运行项目

四、对项目进行一些修改

1、修改登录页

2、修改index.html标题

3、国际化设置

4、icon

5、导航栏文字

效果：

6、面包屑文字

效果：

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

1、入口文件中调用路由

2、路由模块中定义路由

---

一、前言

继【谷粒学院】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

截图：

 

四、对项目进行一些修改

1、修改登录页

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


    <!--44行-->
    <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

    <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="https://github.com/PanJiaChen/vue-admin-template/">
            <el-dropdown-item>开源地址</el-dropdown-item>
          </a>
          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
            <el-dropdown-item>文档</el-dropdown-item>
          </a>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

 

效果：

 

6、面包屑文字

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

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

效果：

 

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

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
})