gaea-cli

欢迎使用Gaea

vue 单页面脚手架 node>8.9.0

安装步骤

安装Gaea-cli

npm install gaea-cli -g

初始化项目（如果项目名字和目录一致，可以在当前目录生成模版代码）

gaea init projectName 或者 g2 init projectName 

安装依赖

npm install

编译第三依赖方包

npm run dll

开发

npm run dev

编译

npm run build

上传

npm run upload

真机调试

npm run carefree

骨架屏html注入

npm run skeleton

功能点

• webpack4.0 + Babel7 ✔️
• 支持 vuex ✔️
• 支持 一键上传 ✔️
• 支持 TypeScript ✔️
• 支持 Smock ✔️
• 支持 NutUI2.0 ✔️
• 支持 按需加载组件 ✔️
• 支持 CareFree ✔️
• 支持 Skeleton ✔️
• 支持 PWA

配置环境

修改webpack.config.js 配置上传、真机调试

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

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

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

new Carefree({
    justUseWifi: false,
    publicPath: '//page.jd.com/exploit/'+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 不要以 / 开头，否则会被认为是服务器的根目录。
• vendorVersion 第三方依赖库的版本控制，提供第三库在上线后，也需要加版本号上线兜底方案 例如：https://static.360buyimg.com/exploit/mtelink/lib/vendor.dll.js | https://static.360buyimg.com/exploit/mtelink/lib/1.0.0/vendor.dll.js

目录结构

1. src目录下的文件功能如下：

• index.html 页面模板
• app.js 入口文件
• app.vue 渲染最高级路由匹配到的组件用的出口vue文件
• router.js 路由文件，在此文件中配置路由信息

1. src子目录功能如下：

• view 存放用作页面视图的vue文件
• component 存放用作组件的vue文件
• asset 在其中的css、js、img目录存放css/js/图片文件
• build目录 存放构建出的文件 1.0.0 是业务代码版本上线文件夹，lib/vendor.js 是静态文件第三库，不会随着业务代码更改而变化的。

1. webpack.config.js 是开发和编译项目的配置文件
2. webpack.dll.config.js 是编译抽离第三方库的配置文件
3. static/vendor.dll.js 和 static/vendor-manifest.json 是 npm run dll 生成的第三方库静态文件和索引文件

辅助功能

骨架屏篇

脚手架提供了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": {
      "host": "",
      "domain": "",
      "projectName": ""
}

cli脚手架分支

• master 构建工具脚本代码
• dev 生成模版代码文件集合

模板demo分支

• trunk.dev.vuex
• trunk.dev.vue
• trunk.dev.ts
• trunk.dev.smock
• trunk.dev.skeleton(手写骨架屏html注入)

注意事项

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