@import".../../sass/home/index-info";//甚至可以在@import端引入相对路径，会被视为在组件中引入相对路径#bgh3{background:url("../../assets/images/holmes.jpg");color:#fff;}前言我一直在研究多页应用如何拥有SPA一样优雅的开发模型。这套架构在项目中使用感觉还不错（跑过几百页project），所以决定开源给大家看这篇文章实现ES6（7）+组件化（.vue|组件化）的使用。.jsx)在项目中开发多页应用（其实就是想做一个多页应用给大家脚手架）目录结构介绍TIPS：任何项目的结构都与目录结构有关，所以这部分非常重要，请仔细耐心阅读。先宏观看下结构|---public//生产环境需要的文件|---static|---css|---es6|---fonts|---images|---views|---src|---assets|---fonts|---images|---components|---js|---sass|---static|---css|---es6|---fonts|---images|---viewssrcassets,components,js,sass中的文件会生成在src/static下，作为我们dev中引用的资源文件。不用说，public就是在线访问的文件。下面介绍一下具体的页面应该如何对应它的资源。以js和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.jscommon.js在多页面应用中，我们的页面往往使用业务模块划分，业务模块由多个页面组成。例如，首页和购物可以分别是官网介绍和购物的业务模块。在这个业务模块下，分别有很多页面，所以我们的js文件也需要一个一个的命名。当然我们也有第三方的js库不需要编译，所以我们用一个lib文件夹来存放。（包括自己写的指令或者过滤器，不需要编译，也可以直接在lib下导入）另外你有很多自己写的工具库需要编译直接放在js目录下（比如as,tools.js,common.js)我们的sass是一样的|---sass|---home|---index.scss...|---shopping|---buy.scss...他们在static下编译的文件会是|---static|---css//scss编译的|---home|---index.css|---shopping|---buy.css|---js//babel处理后的js|---home|---index.js|---shopping|---buy.js页面引用路径为（以home/index.html为例）.........js和sass搞定后，我们的难点就在编写组件的过程中，如何知道应该编译哪个入口js文件呢？所以我们需要对我们的组件名称进行一些约定，这是约定大于配置的前提。|---components|---home//home业务模块|---home-header.vue(jsx)|---index-info.vue(jsx)...|---shopping//shopping业务模块|---buy-list.vue(jsx)...我们组件下的业务模块的名称和前面的sass、js一样。具体成分不同。我们分为几类组件1.当前页面使用的组件2.当前业务模块下的通用组件3.所有业务模块的通用组件当前页面组件名称约定为[page]-[component.vue(jsx)如下|---components|---home|---index-info.vue(jsx)这个index-info组件只在home/index.html页面下使用，当你修改这个组件安装后，会自动编译home/index.js交集的js文件，并刷新页面。当前业务模块下的公共组件，我们约定为[业务模块]-[component].vue(jsx)如下|---components|---common|---loading.vue(jsx)这个home-header组件属于首页业务模块下的公共组件。当你修改该组件时，首页业务模块下的所有js文件都会自动编译并刷新页面。其余为所有业务模块下的通用组件，我们约定将它们全部放在components/common目录下，没有具体的命名约定|---components|---common|---loading.vue(jsx)thisloading的组件是所有业务模块下的通用组件。当你修改该组件时，它会自动编译所有业务模块下的js文件并刷新页面。编译组件的原则和命名约定的原因是：我会读取文件夹名称，组件名称，根据组件的变化编译名称对应的交集js。至此，我们已经解决了组件的问题。因为我使用的是主gulp辅助webpack，webpack只用于编译，所以编译基本达到二次编译。比单独使用webpack构建要快得多。如果单纯使用webpack进行构建，需要配置entry和HTMLPlugin。所以会慢很多，不过我这一套没必要这么累赘。图片&&字体文件这其实是个大坑。我们的实现目标是组件可以导入相对路径的图片或者字体文件//比如在html标签中//风格@import".../../sass/home/index-info";//甚至可以在@import端引入相对路径，会被视为在组件中引入相对路径#bgh3{background:url("../../assets/images/holmes.jpg");color:#fff;}这个坑真是一言难尽。配置这个坑之前我亲自尝试过各种体位。让我直接告诉你***实现是如何的。dev路径是这样的，页面可以显示图片或者字体。build之后的路径是这样的，这样开发和发布之后的资源已经统一了。探索这一步真的很累T.T，有兴趣的请自行查看源码。环境变量的配置我们在webpack中经常会遇到不同环境不同配置的问题。首先，我们可以在package.json中配置一个脚本//package.json"scripts":{"build":"NODE_ENV=productiongulpbuild","dev":"NODE_ENV=devgulpreload"}，假设我们需要配置不同的api针对不同环境的请求地址，我们可以使用我们在package.json中设置的NODE_ENV来标识当前环境（这部分我是在gulpfile中处理的，所以在文件中NODE_ENV可以直接在里面标识，如下）//src/js/ajaxurl.jsconstserver1='https://production.server.com';constserver2='https://dev.server.com';letuseServer=null;if(NODE_ENV==='production'){useServer=server1;}elseif(NODE_ENV==='dev'){useServer=server2;}exportdefaultuseServer;//src/js/home/index.jsimporturlfrom'../ajaxurl';控制台日志（网址）；这就解决了我们不同环境下配置不同的问题。我默认配置了dev和production，大家可以自行扩展。例如，假设你需要在开发中配置测试，你可以写一个NODE_ENV=testgulpreload。如果需要预发布包测试，可以使用另一个NODE_ENV=preproductiongulp构建。总之，gulpbuild是用来打包的，gulpreload是用来开发的。笔记开发：执行命令npmrundev发布：执行命令npmrunbuild（顺便说一句，不要忘记在gulpfile.js中替换你的CDN链接，进入gulp文件并修改这里的变量constCDN='yourCDNLink'）name一定要遵守约定！命名必须遵循约定！不然不知道编谁！！！gulp配置非常简单。你可以看看并为你自己的项目修改它。不明白的可以直接问我。如果不完全前后端分离，直接把这个src放在后台目录下是没有问题的。写vue和react是没问题的。我已经编写了所有示例演示。下面分别是两者的repo地址。vue-multpage:https://github.com/MeCDod/vue-multipagereact-multpage:https://github.com/MeCDod/react-multipageTODO[]项目单元测试[]项目Cli脚手架Vue-cli或create-react-app是一个cli脚手架，但是！我太懒了，没时间！你可以先试试clone，如果喜欢的人够多，我就把他写成cli，发布npm:)我是在mac下开发的，花了大半天写了window的兼容性，window可能有bug，不是我！窗外是辣鸡！***让我向您展示我们的一个项目结构。概览js部分sass部分组件及页面
