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

2022-09-14 415

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 基于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@163.com>"</span>,</span></span>

2.2 如果需要修改端口号

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

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

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

vue 运行环境中配置端口号

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

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

├── 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修改成登录

2.6 页面零星修改

2.6.1 标题

2.6.2 国际化设置

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

2.6.3 导航栏文字

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

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

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

2.6.4 关闭校验(必做)

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

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

方式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实现在线教育前端（一）

传智在线

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

1.1 vue-element-admin 概述

1.2 安装

1.3 vue-admin-template介绍

1.4 安装

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

2.1 修改项目信息

2.2 如果需要修改端口号

2.3 项目的目录结构

2.4 运行项目

2.5 登录页修改

2.6 页面零星修改

2.6.1 标题

2.6.2 国际化设置

2.6.3 导航栏文字

2.6.4 关闭校验(必做)

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

传智在线

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

1.1 vue-element-admin 概述

1.2 安装

1.3 vue-admin-template介绍

1.4 安装

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

2.1 修改项目信息

2.2 如果需要修改端口号

2.3 项目的目录结构

2.4 运行项目

2.5 登录页修改

2.6 页面零星修改

2.6.1 标题

2.6.2 国际化设置

2.6.3 导航栏文字

2.6.4 关闭校验(必做)

热门文章

最新文章

相关课程

相关电子书