Vue或React多页应用脚手架
前言
目录结构介绍
我们先宏观的看下结构 |--- public // 生产环境下所需的文件 |--- static |--- css |--- es6 |--- fonts |--- images |--- views |--- src |--- assets |--- fonts |--- images |--- components |--- js |--- sass |--- static |--- css |--- es6 |--- fonts |--- images |--- views
我们展开介绍下具体的页面应该如何对应它的资源。拿 |--- views |--- home // 官网介绍 业务模块 |--- index.html ... |--- shopping // 购物业务模块 |--- buy.html ... |--- js |--- lib |--- vue.js |--- react.js |--- react.dom.js ... |--- home // 官网介绍业务模块的js |--- index.js ... |--- shopping // 购物业务模块的js |--- buy.js ... tools.js common.js 在多页应用中,往往我们的页面以业务模块划分,业务模块由许多的页面组成。 当然,我们还有第三方的js库是不需要编译的,所以我们专门用一个 另外,你还有许多自己写的需要编译的工具库直接放在 我们的sass也是同理 |--- sass |--- home |--- index.scss ... |--- shopping |--- buy.scss ... 他们编译在 |--- static |--- css // scss 编译后的 |--- home |--- index.css |--- shopping |--- buy.css |--- js // babel处理后的js |--- home |--- index.js |--- shopping |--- buy.js 页面引用的路径就为(home/index.html为例) ... <link rel="stylesheet" href="../../static/css/home/index.css"> ... <script src="../../static/es6/lib/vue(react).js"></script> <script src="../../static/es6/lib/react.dom.js"></script> <script src="../../static/es6/home/index.js"></script> ... js和sass搞定了后,我们的难点是编写组件的过程中,如何知道应该编译哪个入口js文件呢? |--- components |--- home // home 业务模块 |--- home-header.vue(jsx) |--- index-info.vue(jsx) ... |--- shopping // shopping 业务模块 |--- buy-list.vue(jsx) ... 我们 我们分为几种类型的组件
当前页面组件的命名,我们约定为 如下 |--- components |--- home |--- index-info.vue(jsx) 这个 当前业务模块下的公用组件,我们约定为 如下 |--- components |--- home |--- home-header.vue(jsx) 这个 剩下的就是所有业务模块下的通用组件,我们约定全放在 |--- components |--- common |--- loading.vue(jsx) 这个 编译组件的原理以及为什么约定命名的原因是:
至此,我们就把组件的问题也解决了 由于我采用的是主gulp辅webpack,webpack仅仅只编译用,所以编译基本达到秒编译。比单纯利用webpack做构建快得多。如果单纯采用webpack做构建,需要去配置entry,配置HTMLPlugin。所以会慢得多,然而我这一套并不需要如此繁琐。 图片&&字体文件
我们的实现目标是组件能相对路径引入图片或字体文件 // 如 在html标签里这样 <template> <figure> <img src="../../assets/images/home/logo.jpg" alt="头像"> </figure> </template> // 在style里这样 <style rel="stylesheet/scss" lang="sass"> @import "../../sass/home/index-info"; // 甚至可能在这@import面引入相对路径,这都会算是在组件里引入相对路径 #bg h3 { background: url("../../assets/images/holmes.jpg"); color: #fff; } </style> 这个坑,真是不可描述,我个人尝试了各种体位,才把这个坑配置好。 直接给大家看最后实现是怎样的。
这样就达到了开发和发布后的资源统一,摸索这一步真是挺累的 T.T,有兴趣的自己看源码吧。 环境变量的配置
首先可在 // package.json "scripts": { "build": "NODE_ENV=production gulp build","dev": "NODE_ENV=dev gulp reload" }, 假设我们需要为不同环境配置不同的api请求地址,就可以利用我们在 // src/js/ajaxurl.js const server1 = 'https://production.server.com'; const server2 = 'https://dev.server.com'; let useServer = null; if(NODE_ENV === 'production') { useServer = server1; } else if(NODE_ENV === 'dev') { useServer = server2; } export default useServer; // src/js/home/index.js import url from '../ajaxurl'; console.log(url); 这样就解决了我们不同环境下不同配置的问题,我默认配置了 假设你需要在 开发中 配置测试,你可以写一条 如果需要 预发布打包 测试,就可以另一条 总之就是打包使用 注意事项开发:执行命令 命名一定要按约定来! 否则不知道要编译谁!!! gulp配置很简单,大家可以看一下针对各自项目进行修改,不懂得可以直接问我。 如果你们不完全的前后端分离,把这个src直接放在后台目录下也没有问题。 写vue和react都没问题,我把示例demo都写好了,下面是分别两个的repo地址。 vue-multpage : https://github.com/MeCKodo/vue-multipage react-multpage : https://github.com/MeCKodo/react-multipage TODO
后话本来是想写成 我是用mac下开发完成的,用了半天多时间专门去给window写了兼容,window还可能会有bug,不是我说!window就是辣鸡! 最后给大家看下我们的某项目结构。 总览 js部分 sass部分 组件和页面 Have a nice day (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |