Mmall 前端工程
Fork from fenix-bookstore-frontend
运行程序
以下几种途径,可以马上浏览最终的效果:
- 通过Git上的源码,以开发模式运行:
# 克隆获取源码 $ git clone https://github.com/LiuKay/mmall-frontend.git # 进入工程根目录 $ cd mmall-frontend # 安装工程依赖 $ npm install # 以开发模式运行,地址为localhost:8080 $ npm run dev然后在浏览器访问:http://localhost:8080
# 编译前端代码
$ npm run build
或者使用--report参数,同时输出依赖分析报告:
# 编译前端代码并生成报告
$ npm run build --report
编译结果存放在/dist目录中,应将其拷贝至Web服务器的根目录使用。对于Fenix Project的各个服务端而言,则通常是拷贝到网关工程中静态资源目录下。
与后端联调
同样出于前后端分离的目的,理论上后端通常只应当依据约定的服务协议(接口定位、访问传输方式、参数及模型结构、服务水平协议等)提供服务,并以此为依据进行不依赖前端的独立测试,最终集成时使用的是编译后的前端产品。
不过,在开发期就进行的前后端联合在现今许多企业之中仍是主流形式,由一个人“全栈式”地开发某个功能时更是如此,因此,当要在开发模式中进行联调时,需要修改项目根目录下的main.js文件,使其不导入Mock.js,即如下代码所示的条件语句判断为假
/**
* 默认在开发模式中启用mock.js代替服务端请求
* 如需要同时调试服务端,请修改此处判断条件
*/
// eslint-disable-next-line no-constant-condition
if (process.env.MOCK) {
require('./api/mock')
}
也有其他一些相反的情况,需要在生产包中仍然继续使用Mock.js提供服务时(譬如Docker镜像icyfenix/bookstore:frontend就是如此),同样应修改该条件,使其结果为真,在开发模式依然导入了Mock.js即可。
工程结构
Mmall 的工程结构完全符合vue.js工程的典型习惯,事实上它在建立时就是通过vue-cli初始化的。此工程的结构与其中各个目录的作用主要如下所示:
+---build webpack编译配置,该目录的内容一般不做改动
+---config webpack编译配置,用户需改动的内容提取至此
+---dist 编译输出结果存放的位置
+---markdown 与项目无关,用于支持markdown的资源(如图片)
+---src
| +---api 本地与远程的API接口
| | +---local 本地服务,如localStorage、加密等
| | +---mock 远程API接口的Mock
| | | \---json Mock返回的数据
| | \---remote 远程服务
| +---assets 资源文件,会被webpack哈希和压缩
| +---components vue.js的组件目录,按照使用页面的结构放置
| | +---home
| | | +---cart
| | | +---detail
| | | \---main
| | \---login
| +---pages vue.js的视图目录,存放页面级组件
| | \---home
| +---plugins vue.js的插件,如全局异常处理器
| +---router vue-router路由配置
| \---store vuex状态配置
| \---modules vuex状态按名空间分隔存放
\---static 静态资源,编译时原样打包,不会做哈希和压缩
组件
Mmall 前端部分基于以下开源组件和免费资源构建:
- Vue.js
渐进式JavaScript框架 - Element
一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库 - Axios
Promise based HTTP client for the browser and node.js - Mock.js
生成随机数据,拦截 Ajax 请求 - DesignEvo
一款由PearlMountain有限公司设计研发的logo设计软件
协议
-
本文档代码部分采用Apache 2.0协议进行许可。遵循许可的前提下,你可以自由地对代码进行修改,再发布,可以将代码用作商业用途。但要求你:
- 署名:在原有代码和衍生代码中,保留原作者署名及代码来源信息。
- 保留许可证:在原有代码和衍生代码中,保留Apache 2.0协议文件。
-
本作品文档部分采用知识共享署名 4.0 国际许可协议进行许可。 遵循许可的前提下,你可以自由地共享,包括在任何媒介上以任何形式复制、发行本作品,亦可以自由地演绎、修改、转换或以本作品为基础进行二次创作。但要求你:
- 署名:应在使用本文档的全部或部分内容时候,注明原作者及来源信息。
- 非商业性使用:不得用于商业出版或其他任何带有商业性质的行为。如需商业使用,请联系作者。
- 相同方式共享的条件:在本文档基础上演绎、修改的作品,应当继续以知识共享署名 4.0国际许可协议进行许可。