Vue单页面应用脚手架Gaea 4.0

Gaea

Vue技术栈单页面构建工具

Getting Started

Gaea构建工具是基于Node.js、Webpack模版工程等的Vue技术栈的整套解决方案，包含了开发、调试、打包上线完整的工作流程

Prerequisites

请先安装node，版本大于10.15.0，如果没有安装，请前往安装

Installing npm i gaea-cmd -g 全局安装 g2 init projectName（gaea init projectName) 初始化项目,项目名字和目录名字一致会默认在当前文件下生成模版 npm i 安装依赖 npm run dll 编译第三方库 Npm Scripts npm run dev 开发 npm run build 打包编译 npm run upload 上传 npm run lint 代码检查、格式化 npm run carefree 真机调试 npm run skeleton 骨架屏注入 npm run compress 图片压缩转换 Feature Webpack4.0 + Babel7 Vuex 一键上传 TypeScript Smock NutUI2.0 按需加载组件 CareFree Skeleton ESlint、Prettier TinyPNG图片压缩、Webp转换 Usage

安装后，使用之前还需要配置上线路径、项目信息等

webpack.config.js 配置上传

配置上传测试服务器地址和路径，具体可参看，配置上传的host、用户名username、密码password、上传地址target example

new WebpackUploadPlugin({ source:'build', ignoreRegexp:/node_moudles/, httpOption:{ host:'测试服务器地址', port:3000, username:'', password:'', target:`/var/www/html/${config.ftpServer}/${config.ftpTarget}` } }) webpack.config.js 配置真机调试

配置carefree真机调试，具体可参看，例如：我们将开发阶段的代码打包上传至测试域名page.jd.com，用于真机扫二维码调试 example

new Carefree({ justUseWifi: false, publicPath: '//page.jd.com/'+config.ftpTarget+'/'+config.version+'/', ftp: { host: '测试服务器地址', port: 3000, source: 'build', target: '/var/www/html/page.jd.com/'+config.ftpTarget+'/' } }) webpack.dll.config.js 配置第三库依赖

目前的第三方库有 vue、qs、axios、vue-router等，如果增加和删除的话，可以更改字符串："vue,qs,axios,vue-router" ;重新执行npm run dll

package.json 配置项目信息 name 项目名称 version 项目版本，控制上线静态资源版本 例如： https://static.360buyimg.com/exploit/mtelink/1.0.0/js/app.js publicPath 项目上线 html 中静态资源的路径地址前缀 例如：//static.360buyimg.com/exploit/mtelink 如果是html和静态资源都交给后端，那么这个值设置成空就行。 ftpServer 项目上传根目录 例如：misc.360buyimg.com | static.360buyimg.com ftpTarget 项目上传的文件目录 例如：exploit/test | exploit/mtelink 不要以 / 开头，否则会被认为是服务器的根目录。 tinypngkey 使用TinyPNG 需要去官网注册KEY，填入这个字段，后续就可以用npm run compress压缩图片。 vendorVersion 第三方依赖库的版本控制，提供第三库在上线后，也需要加版本号上线兜底方案 例如：https://static.360buyimg.com/exploit/mtelink/lib/vendor.dll.js | https://static.360buyimg.com/exploit/mtelink/lib/1.0.0/vendor.dll.js Project Catalog src目录下的文件功能如下： index.html 页面模板 app.js 入口文件 app.vue 渲染最高级路由匹配到的组件用的出口vue文件 router.js 路由文件，在此文件中配置路由信息 src子目录功能如下： view 存放用作页面视图的vue文件 component 存放用作组件的vue文件 asset 在其中的css、js、img目录存放css/js/图片文件 build目录 存放构建出的文件 1.0.0 是业务代码版本上线文件夹，lib/vendor.js 是静态文件第三库，不会随着业务代码更改而变化的。 webpack.config.js 是开发和编译项目的配置文件 webpack.dll.config.js 是编译抽离第三方库的配置文件 static/vendor.dll.js 和 static/vendor-manifest.json 是 npm run dll 生成的第三方库静态文件和索引文件 Other Features 图片压缩篇

采用TinyPNG node.js API 进行在线压缩图片，并且转换Webp格式文件，需要去官网注册KEY，填入package.json文件 tinypngkey字段。每个账号每个月有500次的免费上传压缩限制。

路由篇

文件router.js 配置了脚手架的相关路由信息，推荐使用【history】路由。脚手架支持history路由和hash路由。在 router.js 中默认是history路由。它是真实的路由地址，所以需要后台那帮你配置重定向。

比如首页的路由是 http://telink.jd.com/index。那么你的路由的首页也是/index 。 比如搜索页/search 是不存在后端服务器上的。所以需要你让后端把其余的单页面的路由都重定指向首页的vm。

对于carefree，上传到测试服务器page.jd.com 默认是hash路由，方便大家进行测试

const router = new VueRouter({ mode:carefree?'hash':'history', routes }); 骨架屏篇

脚手架提供了vue的骨架屏注入方案，在命令行工具选择骨架屏，就会下载骨架屏相对应的模板。

src/skeleton 就是基于vue-server-renderer服务端渲染，抽取手写骨架屏的css 和 html 注入到 打包的html中。

src/skeleton/skeleton.vue 文件就是手写的骨架屏组件，推荐只渲染入口页首屏骨架 npm run skeleton 就会将src/skeleton/index.html 生成到外层src/index.html 注入完成后，就可以后续正常开发

SMOCK篇

smock 是开发阶段基于swagger的自动化mock假数据工具，需要配置参数如下： 修改package.json 中字段，具体可以参看

"smock": { "docPath": "", //ip地址 "realHostName": "" //域名 }, eslint 和 prettier篇

脚手架支持npm run lint 一键检查和格式化src目录下的业务.js,.vue文件，遵循standard,eslint-plugin-vue标准。关闭了一些严格的要求，如果有个性化需求可以在Webpack模版工程下的.eslintrc.js文件设置规则。

重点是，由于加了eslintrc相关文件，Vscode等编辑器会提示报错，体验比较糟糕，为了不影响开发心情，可以关闭Vscode的提示，只在需要的时候执行一遍命令，就可以自动修改和提示需要修复的报错。

Note 上线逻辑，前后端分离上线，lib/vendor.js 属于第三方库会发生变动机会比较小，所以在后续迭代可以不需要上线，只需要上线1.0.0/或者1.0.1/版本的文件 如果是覆盖上线，需要统一一次刷新cdn所有静态资源路径，因为整个build包是一个整体。如果是流量较高的业务，建议新增版本上线，覆盖版本上线有小风险。 使用carefree时候，注意自己的cmd等是黑色背景主体，不然二维码是反的。 Plan

开发计划

Change Log

更新日志

License

MIT License - LICENSE