未加星标

Vue项目结构介绍

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

编辑推荐: 本文来自CSDN,文章详细描述了移动端页面使用 vue2.0 重构中的接口 mock、前后端分离等,整个过程的介绍。

凡普信贷的移动端页面正在使用 vue2.0 重构,在基于 vue-cli 脚手架生成项目模板基础上做了些改动,加入了 vue-router ,vuex 等配套设施,本地 dev server 中加入了接口 mock 功能,还增加一个 build server 来预览 build 结果页面,前后端通过 spa 的方式实现分离,并相应做了分离后的联调,部署方案。在这里俺也对整个过程简单做个介绍吧。

目录结构


Vue项目结构介绍

快速开始

git clone https://github.com/hanan198501/vue-spa-template.git

cd vue-spa-template

cnpm install

npm run dev

命令列表

#开启本地开发服务器,监控项目文件的变化,实时构建并自动刷新浏览器,浏览器访问 http://localhost:8081

npm run dev

#使用生产环境配置构建项目,构建好的文件会输出到 "dist" 目录,

npm run build

#运行构建服务器,可以查看构建的页面

npm run build-server

#运行单元测试

npm run unit

前后端分离

项目基于 spa 方式实现前后端分离,后端将所有 url 都返回到同一个 jsp 页面(由前端提供),此 jsp 页面也是前端的入口页面。然后路由由前端控制(基于vue-router),根据不同的 url 加载相应数据和组件进行渲染。

接口 mock

前后端分离后,开发前需要和后端同学定义好接口信息(请求地址,参数,返回信息等),前端通过 mock 的方式,即可开始编码,无需等待后端接口 ready。项目的本地开发服务器是基于 express 搭建的,通过 express 的中间件机制,我们可以很方便的添加接口 mock 功能:

在 build/dev-server.js 中新增接口 mock 处理:

// mock api requests

var mockDir = path.resolve(__dirname, '../mock');

fs.readdirSync(mockDir).forEach(function (file) {

var mock = require(path.resolve(mockDir, file));

app.use(mock.api, mock.response);

});

其中,mock 目录下可能有个文件内容如下,描述了一个接口的数据信息:

module.exports = {

// 接口地址

api: '/api/hello',

// 返回数据

response: function (req, res) {

res.send(`

<p>hello vue!</p>

`);

}

}

组件化

整个应用通过 vue 组件的方式搭建起来,通过 vue-router 控制相应组件的展现,组件树结构如下:


Vue项目结构介绍

单元测试

可以为每个组件编写单元测试,放在 test/unit/specs 目录下面, 单元测试用例的目录结构建议和测试的文件保持一致(相对于src),每个测试用例文件名以 .spec.js 结尾。执行 npm run unit 时会遍历所有的 spec.js 文件,产出测试报告在 test/unit/coverage 目录。

前后端联调

前后端分离后,由于服务端和前端的开发环境处于2台不同的机器上,整个联调过程,入口页面需要引用前端机器的静态资源,又要调用后端机器的异步接口。根据入口页面的位置,我们可以使用不同的联调方案:

1. 入口页面在前端机器:

通过在本地 dev-server 中使用 https://github.com/chimurai/http-proxy-middleware 中间件把接口请求代理到后端机器,vue-cli 生成的 dev-server 中已经自带了这个功能:

// proxy api requests

Object.keys(proxyTable).forEach(function (context) {

var options = proxyTable[context]

if (typeof options === 'string') {

options = { target: options }

}

app.use(proxyMiddleware(context, options))

});

最好通过启动 dev-server 时传入一个参数来控制是否打开代理功能,这样可以避免开发阶段覆盖掉我们的 mock 配置。

2. 入口页面在后端机器:后端工程里面的入口 jsp 中引用的 js 文件地址需要指向前端环境中的地址,联调时才能显示最新的修改。主要有2种实现方式:1) jsp 文件引用一个固定域名(如 debughost)的 js 文件, 后端机器上通过修改此域名的ip指向前端机器,达到引入前端环境 js 的目的。2) jsp 文件通过获取一个 url 参数(如 debughost)的值,这个值为前端机器的 ip 地址,再动态的插入一个 script 标签引入这个 ip 的前端 js 文件。

举个例子,假设前端机器的 ip 为 172.16.36.90,需要加载前端的js文件地址为:http://172.16.36.90:8081/main.js, 那么后端同学的机器中需要在 host 文件加一条记录:

172.16.36.90 debughost

而入口 jsp 页面中则通过以下代码开加载前端js:

var debughost = 'debughost';

location.search.substr(1).split('&').forEach(function (item) {

var arr = item.split('=');

var key = arr[0]; var value = arr[1];

if (key === 'debughost') {

debughost = value;

}

});

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = 'http://' + debughost + ':8081/main.js?' + (new Date()).getTime();

document.head.appendChild(script);

这样,jsp 页面默认会加载 http://debughost:8081/main.js这个文件。此外,如果不想用 debughost 这个域名的 js 文件,访问 jsp 时候还可以通过 url 带入 debughost 参数来指定前端 ip 。

部署方案分离后前后端代码会存放在2个单独的 git 仓库中,构建过程也是分开的。后端构建时,需要依赖前端的构建结果。具体流程如下:

1. 拉取前端项目代码2. 构建前端(构建结果放在dist目录)3. 拉取后端代码4. 将前端的构建结果(dist目录里的文件)复制到后端工程中5. 构建后端

此过程可以借助 jenkins 配置,或者,让运维同学配合修改部署脚本。

最终的项目模板会是这样: annnhan/vue-spa-template

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Vue项目结构介绍
本站链接:https://www.codesec.net/view/621067.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(73)