教育项目--后台前端项目创建【21】

阳光穿透心脏的1/2处 2023-10-05 18:17 12阅读 0赞

#### 文章目录 ####

*  1.导入资源
 *  2.安装依赖
 *  3.启动
 *  4.前端页面环境说明
 *   *  4.1前端框架入口
     *  4.2基于技术点
     *  4.3框架build目录
     *  4.4框架src目录
 *  5.修改配置

**将资源中的 21515151513进行下载解压之后导入到我们的工作区中**

## 1.导入资源 ##

在线教育项目前端框架使用包.zip

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]

## 2.安装依赖 ##

npm install

**下载的时候可能会失败，可以将`node_modules`文件删掉再次下载就好了**

这里呢建议还是使用git进行下载吧 在vscode中可能会有git配置环境变量的问题

# 克隆项目
    git clone https://github.com/PanJiaChen/vue-element-admin.git
    
    # 进入项目目录
    cd vue-element-admin
    
    # 安装依赖
    npm install
    
    # 本地开发 启动项目
    npm run dev

## 3.启动 ##

npm run dev

项目目录右键终端打开，执行结束之后会自动跳转到`http://localhost:9527/`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 2]  
出现这样的就是成功了

## 4.前端页面环境说明 ##

### 4.1前端框架入口 ###

`index.heml` 入口  
`main.js` 入口

### 4.2基于技术点 ###

`vue-admin-template`模板：  
`vue`\+`element-ui`

### 4.3框架build目录 ###

类似于是java中的编译器，进行构建编译的脚本文件

### 4.4框架src目录 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 3]

> src  
> ├── api // 各种接口  
> ├── assets // 图片等资源  
> ├── components // 各种公共组件，非公共组件在各自view下维护  
> ├── icons //svg icon  
> ├── router // 路由表  
> ├── store // 存储  
> ├── styles // 各种样式  
> ├── utils // 公共工具，非公共工具，在各自view下维护  
> ├── views // 各种layout  
> ├── App.vue //***项目顶层组件***  
> ├── main.js //***项目入口文件***  
> └── permission.js //认证入口

## 5.修改配置 ##

> 5.1 这里我的配置是这样的`vue.config.js`中的30行`lintOnSave: process.env.NODE_ENV === 'development',` 修改为`lintOnSave: false,`，这个是代码检测的。

修改部分可以参照`https://blog.csdn.net/fyyyr/article/details/105974282`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210122201350643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210122212555198.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210122212612405.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210122223223252.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70