目录
一、前言
二、项目结构介绍
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
})
