基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

传智在线

1.传智在线前端工程环境搭建

1.1 vue-element-admin 概述

  • vue element admin 是 基于 Element ui一个半成品项目,已经完成了通用功能。
    • 封装了一些特有的js
    • 封装了一些组件
  • vue-element-admin是基于element-ui 的一套后台管理系统集成方案。

功能:https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

GitHub地址:GitHub - PanJiaChen/vue-element-admin: A magical vue admin https://panjiachen.github.io/vue-element-admin

项目在线预览:Vue Element Admin

1.2 安装

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"># 解压压缩包</span>
<span style="color:#aa5500"># 进入目录</span>
<span style="color:#3300aa">cd</span> vue-element-admin-master
<span style="color:#aa5500"># 安装依赖</span>
npm install
<span style="color:#aa5500"># 启动。执行后,浏览器自动弹出并访问http://localhost:9527/</span>
npm run dev</span></span>

1.3 vue-admin-template介绍

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板(最少精简版),可作为模板进行二次开发。

GitHub地址:GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template

建议:你可以在 vue-Element-admin-template 的基础上进行二次开发,把 vue-element-admin当做工具箱,想要什么功能或者组件就去 vue-element-admin 那里复制过来。

1.4 安装

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"># 解压压缩包</span>
<span style="color:#aa5500"># 进入目录</span>
<span style="color:#3300aa">cd</span> vue-admin-template-master
<span style="color:#aa5500"># 安装依赖</span>
npm install
<span style="color:#aa5500"># 启动。执行后,浏览器自动弹出并访问http://localhost:9527/</span>
npm run dev</span></span>

2.后台管理系统前端优化

2.1 修改项目信息

package.json

<span style="background-color:#f8f8f8"><span style="color:#333333">  <span style="color:#aa1111">"name"</span>: <span style="color:#aa1111">"zx-study"</span>,
  <span style="color:#aa1111">"version"</span>: <span style="color:#aa1111">"3.1.0"</span>,
  <span style="color:#aa1111">"description"</span>: <span style="color:#aa1111">"传智在线后台管理系统"</span>,
  <span style="color:#aa1111">"author"</span>: <span style="color:#aa1111">"liangtong <itcast_lt�64;163.com>"</span>,</span></span>

2.2 如果需要修改端口号基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

  • 在element-ui-admin 最新版本中,使用vue-cli@3构建项目,
  • vue-cli@3构建的项目,核心配置文件 ==vue.config.js==
  • 默认端口号

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

npm 配置端口号(注意=等左右没有空格)

<span style="background-color:#f8f8f8">npm run dev --port=8888</span>

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

vue 运行环境中配置端口号

<span style="background-color:#f8f8f8">port=7777</span>

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

2.3 项目的目录结构

  • 根目录:

.

├── build // 构建脚本

├── mock // 模拟数据服务

├── node_modules // 项目依赖模块 *

├── plop-templates // 模块生成工具

├── public // 静态资源目录,build之后,public目录下内容不合并,不压缩,直接拷贝到dist中

├── src //项目源代码 *

├── test // 测试程序目录

├── .env.development //开发环境下配置文件,VUE_APP_BASE_API访问路径前缀

├── .env.production //生产环境下配置文件,VUE_APP_BASE_API访问路径前缀

├── package.json // 项目信息和依赖配置 *

└── vue.config.js // vue的核心配置文件 *

  • src目录

src

├── api // 接口目录 ,发送ajax代码 *

├── assets //静态资源目录,在build时,资源进行压缩、合并等操作。

├── components //公共组件目录,非公共组件在各自view下维护

├── directive //指令目录

├── filters // 过滤器目录

├── icons //svg icon

├── router // 路由表 *

├── store // 存储 vuex *

├── styles // 各种样式

├── utils // 公共工具,非公共工具,在各自view下维护 *

├── views // 各种layout 项目中所有的页面都放在此处

├── vendor // 工具(excel、zip)

├── App.vue //项目顶层组件

├── main.js //项目入口文件

├── permission.js //认证入口

└── settings.js 项目内容配置文件(项目标题)

2.4 运行项目

<span style="background-color:#f8f8f8"><span style="color:#333333">npm run dev</span></span>

2.5 登录页修改

  • src/views/login/index.vue(登录组件),将Login修改成登录

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

2.6 页面零星修改

2.6.1 标题

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

2.6.2 国际化设置

打开 src/main.js,修改element ui 的语言为 zh-CN,使用中文语言环境,例如:日期时间组件

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

2.6.3 导航栏文字

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

src/layout/index.vue 布局核心页面

  • src/layout/components/Navbar.vue 导航页面

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">el-dropdown-menu</span> <span style="color:#0000cc">slot</span>=<span style="color:#aa1111">"dropdown"</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">router-link</span> <span style="color:#0000cc">to</span>=<span style="color:#aa1111">"/profile/index"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>Profile<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">router-link</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">router-link</span> <span style="color:#0000cc">to</span>=<span style="color:#aa1111">"/"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>控制台<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">router-link</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://github.com/PanJiaChen/vue-element-admin/"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>Github<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://panjiachen.gitee.io/vue-element-admin/"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>在线演示<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://panjiachen.github.io/vue-element-admin-site/#/"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>Docs帮助文档<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span> <span style="color:#0000cc">divided</span> <span style="color:#0000cc">@click.native</span>=<span style="color:#aa1111">"logout"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">span</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"display:block;"</span><span style="color:#117700">></span>退出<span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-menu</span><span style="color:#117700">></span></span></span>

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

2.6.4 关闭校验(必做)

  • element-ui-admin 默认使用 eslint 代码检查工具
  • 例如:注释后面没有添加空格

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

  • 方式1:忽略所有文件的校验

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)

方式2:关闭提示,在vue.config.js文件中,将 lintOnSave 修改成 false

<span style="background-color:#f8f8f8">  <span style="color:#aa5500">// 校验默认开发状态开启</span>
  <span style="color:#aa5500">// lintOnSave: process.env.NODE_ENV === 'development',</span>
  <span style="color:#000000">lintOnSave</span>: <span style="color:#221199">false</span>,</span>

基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端(一)