vue-element-template前端搭建笔记

1.前期准备

你需要在本地安装 node 和 git。本项目技术栈基于 ES2015+vuevuexvue-router 、vue-cli 、axios 和 element-ui,所有的请求数据都使用Mock.js进行模拟。相关知识需要自己去相关网站学习。

  • Node安装地址:

官网下载地址:https://nodejs.org/en/download/    

中文下载地址:http://nodejs.cn/download/

2 安装框架

本项目在 vue-admin-template 的基础上进行二次开发,建议同时安装vue-admin-template和vue-element-admin,把 vue-element-admin当做工具箱或者集成方案仓库,想要什么功能或者组件就去 vue-element-admin 那里复制过来。这样可以避免冗余代码并加快开发速度。

2.1 安装vue-admin-template

启动完成后会自动打开浏览器访问 http://localhost:9528 , 你看到下面的页面就代表操作成功了。

2.2  安装vue-element-admin

启动完成后会自动打开浏览器访问 http://localhost:9527, 你看到下面的页面就代表操作成功了。

2.3 问题解决

2.3.1安装依赖问题

输入命令npm install --registry=https://registry.npm.taobao.org安装依赖时,如果出现以下错误:

解决方法:

步骤一:执行git config --global url."https://".insteadOf git://

步骤二:再次执行npm install --registry=https://registry.npm.taobao.org

出现以下即安装成功

2.3.2 启动错误

如运行npm run dev 出现以下错误:

解决方法:

步骤一:执行 npm rebuild node-sass

步骤二:执行 npm run dev

2.3.3 浏览器启动两次

运行 npm run dev 浏览器启动两次

解决方法:

步骤一:将vue.config.js文件里面devServer下面的open选项改为open:false

步骤二:在package.json中把scripts下的dev属性配置后面加上—open

步骤三:重新启动

3 目录结构

该开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。

4 功能开发

4.1 新增页面

如新增一个excel页面:

步骤一:在src/views 下新建页面文件

一般性一个路由对应一个文件,该模块下的功能组件或者方法就建议在本文件夹下创建一个utils或components文件夹,各个功能模块维护自己的utils或components组件。如:

步骤二:在src/router/index.js中增加你需要添加的路由;

如果 children 下面只声明了一个路由不会有展开箭头,如果children下面的路由个数大于 1 就会有展开箭头。 如果你想忽视这个自动判断可以使用 alwaysShow: true,这样它就会忽略之前定义的规则,一直显示根路由。

新建成功

4.2 多级目录(嵌套路由)

如果你的路由是多级目录,比如有三级路由嵌套的情况下,不要忘记还要手动在二级目录的根文件下添加一个 <router-view>。原则上有多少级路由嵌套就需要多少个<router-view>。

4.3 新增api

写功能模块代码时,api不要直接写在页面中,而要在src/api 文件夹下创建本模块对应的 api 服务。因为随着业务的迭代,模块会越来越多,所以建议根据业务模块来划分 views,并且 将views 和 api 两个模块一一对应,从而方便维护。如下图:

如 article 模块下放的都是文章相关的 api,这样不管项目怎么累加,api和views的维护还是清晰的,对于全区公用的api模块,单独放置就行。

api示例:

4.4 新增组件

在 src/components 下写全局的组件,如富文本,各种搜索组件,封装的日期组件表格组件等等能被公用的组件。每个页面或者模块特定的业务组件写在src/views/当前模块/components/ 下 。如:src/views/article/components/xxx.vue。这样拆分大大减轻了维护成本。

4.5 新增样式

页面的样式和组件是一个道理,全局的 src/style 放置一下全局公用的样式,每一个页面的样式就写在当前 views下面,请记住加上scoped 或者命名空间,避免造成全局的样式污染。

      

5. 与服务端进行交互

5.1 前端请求流程

在本框架中,一个完整的前端 UI 交互到服务端处理流程是这样的:

1)UI 组件交互操作;

2)调用统一管理的 api service 请求函数;

3)使用封装的 request.js 发送请求;

4)获取服务端返回;

5)更新 data;

从上面的流程可以看出,为了方便管理维护,统一的请求处理都放在 src/api 文件夹中,并且一般按照 model 纬度进行拆分文件。

其中,src/utils/request.js 是基于 axios 的封装,便于统一处理 POST,GET 等请求参数,请求头,以及错误提示信息等。它封装了全局 request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等。

5.2 请求例子

5.3 设置多个baseURL

5.3.1 方法一:设置环境变量

我们可以通过环境变量设置多个baseURL,从而请求不同的 api 地址。

之后根据环境变量创建axios实例,让它具有不同的baseURL。 @/utils/request.js

5.3.2 方法二:直接覆盖

在src/api 中直接覆盖baseURL 

6. mock数据

Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞。

本项目在本地会启动一个mock-server来模拟数据,是完全基于webpack-dev-serve来实现的,所以在你启动前端服务的同时,mock-server就会自动启动。本项目的所有请求都是通过封装的request.js进行发送的,所有的请求都设置了一个baseURL,而这个baseURL又是通过读取process.env.VUE_APP_BASE_API这个环境变量来动态设置的,这样方便我们做到不同环境使用不同的 api 地址。

6.1 移除

如果你不想使用mock-server的话只要在vue.config.js中移除devServer中before这个Middleware就可以了。

注意:移除后需重启服务

6.2 新增

如果你想添加 mock 数据,只要在根目录下找到mock文件,添加对应的路由,对其进行拦截和模拟数据即可。

比如我现在在src/api/user中需要添加一个登录的接口login,首先新建接口:

声明完接口之后,我们需要找到对应的 mock 文件夹mock/user.js,在下面创建一个能拦截路由的 mock 接口

6.3 修改

最常见的操作就是:你本地模拟了了一些数据,待后端完成接口后,逐步替换掉原先 mock 的接口。将mock 的数据切换为真实后端数据,只要在mock下找到对应的路由,将它删除即可。这时候你可以在network中,查看到真实的数据。

6.4 多个server

可以一部分接口走这个服务,另一些接口走另一个服务。

步骤一:只需要将它们分别设置不同的的baseURL即可。 src/utils/request.js

步骤二:之后根据设置的 url 规则在 vue.config.js 中配置多个 proxy 。

6.5 不同环境使用不同的数据

通过设置环境变量来做到不同环境下,请求不同的 api 地址

之后根据环境变量创建axios实例,让它具有不同的baseURL。 src/utils/request.js

本项目中,新增了一个mock环境:

首先在package.json中添加mock脚本

然后,添加环境变量文件

.env.mock

7. 构建和发布

当项目开发完毕,只需要运行一行命令就可以打包你的应用:

构建打包成功之后,会在根目录生成 dist 文件夹,里面就是构建打包好的文件,通常是 ***.js 、***.css、index.html 等静态文件。

如果需要自定义构建,比如指定 dist 目录等,则需要通过 config的 outputDir 进行配置。

8. 其他

本项目开启了eslint,运行npm run lint -- --fix 自动修复一些简单的错误

 

 

 

 

 

 

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值