- 技术支持：该项目基于
vue，由yujihu创建于2020年1月1日。 - 前后端分离情况：
- 前后端分离开发；
- 静态资源由
前端上线； - 域名由
前端申请。
- 项目说明：***
- Vue CLI 3
- Vue
- VueX
- Vue Router
- axios
- Workbox离线存储
- better-scroll处理移动端滚动
- postcss-pxtorem自动将px转成rem，计算规则为： 750px设计稿 -----> 7.5rem
- Commitizen规范git commit
抽取loading效果到html，降低首屏空白时间（建议使用骨架屏）- 骨架屏：目前采取的骨架屏方案为
vue-skeleton-webpack-plugin，支持为不同路由设置不同的骨架屏，开发模式下如果要查看骨架屏效果需要将css.extract设置为 true，但注意此时 css 热重载会失效，查看完毕后记得将其设置为 false- 伪元素 + transform 解决Retina屏1像素问题
- @yolkpie/utils 前端工具类库
- 功能点1
- 功能点2
- 线上域名：https://**.*.com
- 预发域名：https://**.*.com
- 代码库地址：https://**.*.com
- 上线地址：https://**.*.com
- 页面1：https://**.*.com
$ npm install # 安装依赖
$ npm run serve # 运行项目（本地开发）
$ npm run build # 生产环境打包
$ npm run build:prod # 生产环境打包
$ npm run build:yufa # 预发环境打包
$ npm run build:test # 测试环境打包
$ npm run dist # 本地预览打包文件
npm install(安装package.json下项目依赖)；npm run serve(安装成功后启动项目)；- 项目在本地
localhost:80端口运行。
- 配置host：127.0.0.1 dev.*.com
- 配置devServer的proxy，配置路径为：vue.config.js -> devServer -> proxy
注意：提交代码时请使用commitzen，否则commit message不符合规范无法提交，具体参考：https://juejin.im/post/5bd2debfe51d457abc710b57
- 从Master新建分支开发，每次上预发或上线之前，都需要拉取远端master代码，保证本地master代码为最新，合并master代码；
- 上线前：切换到本地master分支，合并开发分支代码到本地master分支；
npm run build打包代码。检查deploy/index.html中是否为线上域名（ '//api.m.jd.com/api'）；- 提交代码至master远程；
- 在jdos的**应用下，进行master的编译镜像；
- 在预发分支上先上线编译好的镜像，没有问题后，准备正式环境上线；
- 在正式环境上线，执行滚动更新，每次1个，间隔40秒（防止线上更新代码期间无法访问）；
- 结束后进行上线确认，否则会影响团队其他成员的上线。
- 在开发分支上执行
npm run build:yufa打包代码； - 提交代码至分支远程；
- 在jdos的**应用下，进行开发分支a的编译镜像，上预发。
├── dist # 打包后生成的文件
├── node_modules # 安装的依赖
├── public # 静态资源文件夹
└── src
├── api # 接口
├── assets # 项目依赖的一些静态资源
├── components # 公共组件
├── skeletons # 页面骨架屏
├── config # 公共配置
├── directives # vue指令
├── filters # vue过滤器
├── mixin # vue混入
├── plugins # 插件
├── request # 网络请求相关
├── router # vue-router
├── store # vuex
├── styles # 公共样式
├── views # 页面视图组件
├── .browserslistrc # 在不同的前端工具间共享目标浏览器
├── .editorconfig # 统一代码风格
├── .env # 环境变量，在所有的环境中被载入
├── .env.prod # 环境变量，在生产环境被载入
├── .env.test # 环境变量，在测试环境被载入
├── .env.yufa # 环境变量，在预发环境被载入
├── .eslintrc.js # 代码检查配置文件
├── .gitignore # git忽略文件
├── .huskyrc # 阻止错误的 git 提交
├── .npmrc # 项目npm配置
├── babel.config.js # 代码转换规则
├── package.json # npm包描述文件
├── package-lock.json # 记录当前状态下实际安装的各个npm package的具体来源和版本号
├── postcss.config.js # css转换规则
├── prettier.config.js # 代码格式化规则
├── README.md # 项目说明
├── vue.config.js # vue-cli配置文件
- 2019.6.10上线1.0.0版本，---首次上线，***等基础功能
- 2019.7.13上线1.0.1版本，---修复 *bug,增加 *功能
- 上线出问题后，及时用上一个镜像资源重新上线，不要回滚。
- 上线与上预发的打包指令存在区别。
- 全局安装commitzen提交代码，规范git commit message，具体参考：https://juejin.im/post/5bd2debfe51d457abc710b57
- 本模板使用的 vue、vuex、vue-router、axios的cdn为公共cdn，实际使用时请换成公司自己的cdn，配置路径为：vue.config.js -> chainWebpack -> cdn
https://cli.vuejs.org/zh/guide/mode-and-env.html
本模板主要包括四种模式，通常一种模式会对应多个环境变量。通常情况下后端的API会有多个指向不同环境的域名（测试、预发、线上）
- 开发模式：本地开发，通过修改
.env文件中的REQUEST_URL变量来请求不同后端环境API- 测试模式：对应后端测试环境API域名
- 预发模式：对应后端预发环境API域名
- 生产模式：对应后端线上环境API域名
例如以 vue-cli-service build --mode prod 命令进行打包，会在prod模式下加载可能存在的 .env、.env.prod 和 .env.prod.local 文件然后构建出生产环境应用。
可以替换项目根目录中的下列文件来指定环境变量：
.env # 在所有环境中被载入
.env.test # 在测试环境中被载入
.env.yufa # 在预发环境中被载入
.env.prod # 在生产环境中被载入
以.env.prod文件为例：
# 左边是变量名(一般大写，下划线分割单词)，右边是变量值
NODE_ENV = "production"
REQUEST_URL = "//api.m.jd.com"
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。可以在应用的代码中这样访问它们：
console.log(process.env.VUE_APP_SECRET)非 VUE_APP_ 开头的变量需要手动嵌入到客户端侧的包中
config.plugin('define')
.tap(args => {
args[0]['process.env'].REQUEST_URL = JSON.stringify(process.env.REQUEST_URL)
return args
})除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：
- NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
- BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
本模板主要针对移动端开发，采用rem作为尺寸单位，为此使用postcss插件，自动将px转换成rem，同时根据屏幕宽度自动计算根字体大小。
如果想要开发PC页面则需要将上述特性移除：
- 移除postcss的pxtorem插件，配置路径为：postcss.config.js -> postcss-pxtorem
- 移除对根字体大小的计算，配置路径为：main.js -> rem
全局安装commitzen提交代码，规范git commit message，具体参考：https://juejin.im/post/5bd2debfe51d457abc710b57
代码规范标准为standard，建议使用prettier格式化代码，代码编辑使用VS Code，安装prettier扩展，shift + alt + f 格式化代码。也可以运行 npm run lint修复不符合规范的代码。
注意：书写的代码不符合规范将无法提交代码。