在线教育项目【vue-element前端工程环境搭建】

素颜马尾好姑娘i 2023-10-02 20:54 17阅读 0赞

**目录**

1，在线教育前端工程环境搭建

1.1 :vue-element-admin概述

1.2：安装

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：关闭校验（必做）

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

## 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][GitHub - PanJiaChen_vue-element-admin_ A magical vue admin https_panjiachen.github.io_vue-element-admin]

项目在线预览：[Vue Element Admin][]

**可从GitHub下载前端项目**，进行改变以用来满足自己的对项目的需求

### 1.2：安装 ###

从GitHub下载完成后对项目进行安装

在前端控制台:进入项目目录：cd .\\vue-element-admin-master-pra\\

![312c9efbe47d441f97b52021b11d64fa.png][]

安装依赖  
npm install

安装完成后进行启动：npm run dev

## 2，优化前端工程的细节 ##

### 2.1：修改前端工程的信息（可做可不做） ###

找到package.json文件

修改name，description，author

![f6099de172074c4f86244289148ec966.png][]

### 2.2：修改端口号（可做可不做） ###

在vue.config.js文件中可修改项目端口号

![90374b424de44dd4a650334293b826ea.png][]

修改端口号的三种方式

第一种默认的地方修改：

![dfd253b51ad74e60b13252754c85d60c.png][]

![eea6390c8e724a5c822b69541134b682.png][]

第二种：npm 配置端口号（注意=等左右没有空格） 启动时运行

npm run dev --port=8888

![8e2fc1e92fc04b3e8db82eca186e5455.png][]

第三种：vue 运行环境（开发环境）中配置端口号

![02f2e63cf6f14bf79387c78dd7b651fb.png][]

port=9999

![8fca5dd853934665ae27aebcbad9dd5d.png][]

![69bf339141a940809289d947076e046e.png][]

### 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：运行项目 ###

> npm run dev

![56e6aa7d4af7499287b5480825f55e60.png][]

### 2.5：登录页面修改（可做可不做） ###

![448052bce0e94fdb9d56de323e0ac537.png][]

### 2.6：页面部分修改【方便查找】 ###

#### 2.6.1：标题 ####

![738b15182cbd47f485a9364696b0096a.png][]

#### 2.6.2：国际化设置 ####

src下的main.js文件

> #### import enLang from 'element-ui/lib/locale/lang/zh-CN' ####

![92fd0fd1ac424acea443ff1a69e0988a.png][]

#### 2.6.3：导航栏中文版 ####

src下layout文件夹下components文件下的Navbar.vue文件中

![d15bbba6ed2a4e75bb603f82aad5197f.png][]

![e6e5f76a202c4da1b8a63a2f10af5cfc.png][]

#### 2.6.4：关闭校验（必做） ####

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

![942a908c94f14ae6a6bde294bca8ca12.png][]

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

![3757e6eaf8bf47859f73ad7b7592c727.png][]

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

> // 校验默认开发状态开启  
> // lintOnSave: process.env.NODE\_ENV === 'development',  
> lintOnSave: false,

![0e848bce6e2345f6a0722033f8711393.png][]

[GitHub - PanJiaChen_vue-element-admin_ A magical vue admin https_panjiachen.github.io_vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[Vue Element Admin]: https://panjiachen.gitee.io/vue-element-admin
[312c9efbe47d441f97b52021b11d64fa.png]: https://img-blog.csdnimg.cn/312c9efbe47d441f97b52021b11d64fa.png
[f6099de172074c4f86244289148ec966.png]: https://img-blog.csdnimg.cn/f6099de172074c4f86244289148ec966.png
[90374b424de44dd4a650334293b826ea.png]: https://img-blog.csdnimg.cn/90374b424de44dd4a650334293b826ea.png
[dfd253b51ad74e60b13252754c85d60c.png]: https://img-blog.csdnimg.cn/dfd253b51ad74e60b13252754c85d60c.png
[eea6390c8e724a5c822b69541134b682.png]: https://img-blog.csdnimg.cn/eea6390c8e724a5c822b69541134b682.png
[8e2fc1e92fc04b3e8db82eca186e5455.png]: https://img-blog.csdnimg.cn/8e2fc1e92fc04b3e8db82eca186e5455.png
[02f2e63cf6f14bf79387c78dd7b651fb.png]: https://img-blog.csdnimg.cn/02f2e63cf6f14bf79387c78dd7b651fb.png
[8fca5dd853934665ae27aebcbad9dd5d.png]: https://img-blog.csdnimg.cn/8fca5dd853934665ae27aebcbad9dd5d.png
[69bf339141a940809289d947076e046e.png]: https://img-blog.csdnimg.cn/69bf339141a940809289d947076e046e.png
[56e6aa7d4af7499287b5480825f55e60.png]: https://img-blog.csdnimg.cn/56e6aa7d4af7499287b5480825f55e60.png
[448052bce0e94fdb9d56de323e0ac537.png]: https://img-blog.csdnimg.cn/448052bce0e94fdb9d56de323e0ac537.png
[738b15182cbd47f485a9364696b0096a.png]: https://img-blog.csdnimg.cn/738b15182cbd47f485a9364696b0096a.png
[92fd0fd1ac424acea443ff1a69e0988a.png]: https://img-blog.csdnimg.cn/92fd0fd1ac424acea443ff1a69e0988a.png
[d15bbba6ed2a4e75bb603f82aad5197f.png]: https://img-blog.csdnimg.cn/d15bbba6ed2a4e75bb603f82aad5197f.png
[e6e5f76a202c4da1b8a63a2f10af5cfc.png]: https://img-blog.csdnimg.cn/e6e5f76a202c4da1b8a63a2f10af5cfc.png
[942a908c94f14ae6a6bde294bca8ca12.png]: https://img-blog.csdnimg.cn/942a908c94f14ae6a6bde294bca8ca12.png
[3757e6eaf8bf47859f73ad7b7592c727.png]: https://img-blog.csdnimg.cn/3757e6eaf8bf47859f73ad7b7592c727.png
[0e848bce6e2345f6a0722033f8711393.png]: https://img-blog.csdnimg.cn/0e848bce6e2345f6a0722033f8711393.png