本文作者:开源技术之家

vue-element-template前端搭建笔记

开源技术之家 1个月前 ( 09-23 ) 90 抢沙发

1 前期准备

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


  • Node安装地址:

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

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

  • Git安装地址:https://git-scm.com/ 

  • Vue官方网站:https://cn.vuejs.org/

  • Element-ui官方网站:https://element.eleme.cn/#/zh-CN/component/table

  • Mock.js官网: http://mockjs.com/

  • ES6教程:https://es6.ruanyifeng.com/

  • axios官网 :http://www.axios-js.com/


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 rebuildnode-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 自动修复一些简单的错误

 


本篇文章来源于微信公众号:                         前端试炼场

本文标题:vue-element-template前端搭建笔记
本文链接:https://www.kyjszj.com/htzq/2309.html
作者授权:除特别说明外,本文由 开源技术之家 原创编译并授权 开源技术之家 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
文章版权及转载声明

作者:开源技术之家本文地址:https://www.kyjszj.com/htzq/2309.html发布于 1个月前 ( 09-23 )
文章转载或复制请以超链接形式并注明出处开源技术之家

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,90人围观)参与讨论

还没有评论,来说两句吧...