默认提交
Showing
4 changed files
with
116 additions
and
126 deletions
| 1 | # vue-cli3-framework | ||
| 2 | 1 | ||
| 3 | ## Project setup | 2 | # 中国平安人寿(香港) |
| 3 | |||
| 4 | ## 介绍 | ||
| 5 | |||
| 6 | 中国平安人寿(香港) 官网 | ||
| 7 | |||
| 8 | ## 开始使用 | ||
| 9 | |||
| 10 | ### 安装依赖 (建议使用国内镜像) | ||
| 4 | ``` | 11 | ``` |
| 5 | npm install | 12 | npm install |
| 6 | ``` | 13 | ``` |
| 7 | 14 | ||
| 8 | ### Compiles and hot-reloads for development | 15 | ### 项目预览 |
| 9 | ``` | 16 | ``` |
| 10 | npm run dev | 17 | npm run dev |
| 11 | ``` | 18 | ``` |
| 12 | 19 | ||
| 13 | ### Compiles and minifies for production | 20 | ### 项目打包 |
| 14 | ``` | 21 | ``` |
| 15 | npm run build | 22 | npm run build |
| 16 | ``` | 23 | ``` |
| 17 | 24 | ||
| 18 | ### Run your tests | 25 | ### 项目打包 -- 沙箱 |
| 19 | ``` | 26 | ``` |
| 20 | npm run test | 27 | npm run sandbox |
| 21 | ``` | 28 | ``` |
| 22 | 29 | ||
| 23 | ### Lints and fixes files | 30 | |
| 31 | ## 项目结构 | ||
| 32 | |||
| 24 | ``` | 33 | ``` |
| 25 | npm run lint | 34 | . |
| 35 | ├── build // webpack相关配置文件 | ||
| 36 | ├── dist // 通过src 目录编译后生成的文件目录,也是小程序开发的项目目录 | ||
| 37 | ├── node_modules // 依赖包 | ||
| 38 | ├── public // 静态资源目录 | ||
| 39 | ├── src // 开发目录 | ||
| 40 | │ ├── api // 数据请求模块 | ||
| 41 | │ ├── assets // 开发相关的静态文件原始资源 | ||
| 42 | │ │ ├── fonts //字体文件 | ||
| 43 | │ │ ├── images // 图片文件 | ||
| 44 | │ ├── common // 通用内容 | ||
| 45 | │ │ ├── lang // 国际化语言包 | ||
| 46 | │ ├── components // 公共组件 | ||
| 47 | │ ├── const // 静态数据 | ||
| 48 | │ ├── mock // 本地数据模拟 | ||
| 49 | │ ├── pages // 页面 | ||
| 50 | │ ├── store // 状态管理 | ||
| 51 | │ ├── style // 公共样式 | ||
| 52 | │ ├── utils // 工具类 | ||
| 53 | │ ├── App.vue // 根组件 | ||
| 54 | │ ├── main.js // 文件入口 | ||
| 55 | │ ├── router.js // 路由 | ||
| 56 | ├── test // 测试模块 | ||
| 57 | ├── babel.config.js // babel配置文件 | ||
| 58 | ├── postcss.config.js // postcss配置文件 | ||
| 59 | ├── package.json // 通过src 目录编译后生成的缓存目录 | ||
| 60 | ├── README.md // 项目说明 | ||
| 61 | └── vue.config.js // vue 配置 | ||
| 62 | |||
| 63 | |||
| 26 | ``` | 64 | ``` |
| 27 | 65 | ||
| 28 | ### Customize configuration | 66 | ## 前置说明 |
| 29 | See [Configuration Reference](https://cli.vuejs.org/config/). | 67 | |
| 68 | ### 开发环境 | ||
| 69 | |||
| 70 | 脚手架版本: CLI3 | ||
| 71 | |||
| 72 | node版本: 推荐v12.10.0或以上 | ||
| 73 | |||
| 74 | npm版本: 推荐6.10.3或以上 | ||
| 75 | |||
| 76 | |||
| 77 | |||
| 78 | ## 规范说明 | ||
| 79 | |||
| 80 | ### vue文件分离 | ||
| 81 | |||
| 82 | 一般业务.vue文件通常会在同一目录下拆分为.vue,.js,.scss三个文件。 | ||
| 83 | |||
| 84 | 正常的创建和引用vue文件都是html、css、js三者在一起的,这样写起来虽然方便了,但是页面比较大或者代码比较多的情况下,即使使用组件有时代码也比较多,简单来说查找不变不利于编程,大的来说影像优化性能。将代码中的html、css、js分离出来是个很好的选择。 | ||
| 85 | |||
| 86 | ### 编码规范 | ||
| 30 | 87 | ||
| 88 | 本项目不使用eslint代码检查工具。 | ||
| 31 | 89 | ||
| 90 | 开发人员需遵循vue官方风格规范。 | ||
| 32 | 91 | ||
| 92 | ### 样式规范 | ||
| 33 | 93 | ||
| 94 | - 优先使用 _var.scss 声明的样式变量 | ||
| 95 | - font-family 名字顺序 Arial -> Microsoft YaHei | ||
| 34 | 96 | ||
| 35 | ### z-index权重划分 | 97 | ### z-index权重划分 |
| 36 | 98 | ||
| 37 | 遮罩蒙层:5000 | 99 | - 遮罩蒙层:5000 |
| 38 | 导航栏:3000 | 100 | - 导航栏:3000 |
| 39 | element-ui:2000+ | 101 | - element-ui:2000+ |
| 40 | 自定义交互组件 如date-picker: 800-900 | 102 | - 自定义交互组件 如date-picker: 800-900 |
| 41 | 一般业务级:小于100 | 103 | - 一般业务级:小于100 |
| 104 | |||
| 105 | ### 响应式方案 | ||
| 106 | |||
| 107 | 通过purecss+@media方式实现。 | ||
| 108 | |||
| 109 | 选取原因: | ||
| 110 | - 与bootstrap相比,purecss要轻量得多 | ||
| 111 | |||
| 112 | ### 数据加密 | ||
| 113 | |||
| 114 | 请求都需要进行加密。 | ||
| 115 | |||
| 116 | 加密方案:AES+RSA | ||
| 117 | |||
| 118 | ## 国际化支持说明 | ||
| 119 | |||
| 120 | ### 使用说明 | ||
| 121 | |||
| 122 | 采用方案:[i18n](https://github.com/kazupon/vue-i18n) | ||
| 123 | |||
| 124 | 在文件入口main.js注入i18n | ||
| 125 | |||
| 126 | |||
| 127 | ### 三语支持(默认繁体): | ||
| 128 | |||
| 129 | - 繁体[tc] | ||
| 130 | - 简体[zh] | ||
| 131 | - 英文[en] | ||
| 132 | |||
| 133 | ### 执行逻辑 | ||
| 134 | |||
| 135 | 访问页面时,会先从localStorage里获取历史选取语言,若活动结果为空,则默认使用繁体。 | ||
| 136 | |||
| 137 | 语言切换时,把当前选择语言注入到i18n并埋到localStorage,同时广播事件,通知页面初始化(重新读取cms内容)。 | ||
| 138 | |||
| 139 | |||
| 140 | ## TODO | ||
| 141 | |||
| 142 | - [x] 项目后期需补充 SEO优化插件 PrerenderSPAPlugin | ... | ... |
build/oss-released.js
deleted
100644 → 0
| 1 | /** | ||
| 2 | * Created by pc on 2018/5/11. | ||
| 3 | * 需要的库为(co, ali-oss, glob) | ||
| 4 | * npm i co ali-oss glob --save | ||
| 5 | * ossConfig.json格式如下 | ||
| 6 | { | ||
| 7 | "region": "oss-cn-shanghai", //OSS region | ||
| 8 | "accessKeyId": "XXXXXXXX", //OSS accessKeyId | ||
| 9 | "accessKeySecret": "XXXXXXXX", //OSS accessKeySecret | ||
| 10 | "bucket": "ogo", //OSS bucket | ||
| 11 | "localPath": "./dist/**", //本地需要上传的文件目录,(/**)为遍历根号后所有目录 | ||
| 12 | "ossPath": "/mobile/", //oss线上文件目录(不能为根目录,避免误操作,最后加上'/') | ||
| 13 | "callbackUrl": "http://nodejs.org/dist/index.json" //预留请求服务器更新缓存的API | ||
| 14 | } | ||
| 15 | * | ||
| 16 | * | ||
| 17 | */ | ||
| 18 | |||
| 19 | let co = require('co') | ||
| 20 | let OSS = require('ali-oss') | ||
| 21 | let glob = require('glob') | ||
| 22 | let http = require('http') | ||
| 23 | let Config = require('./ossConfig.json') | ||
| 24 | |||
| 25 | // 配置oss信息 | ||
| 26 | let client = new OSS({ | ||
| 27 | region: Config.region, | ||
| 28 | accessKeyId: Config.accessKeyId, | ||
| 29 | accessKeySecret: Config.accessKeySecret, | ||
| 30 | bucket: Config.bucket | ||
| 31 | }) | ||
| 32 | |||
| 33 | // 删除线上目录 | ||
| 34 | function deleteFiles() { | ||
| 35 | if (Config.ossPath !== '' && Config.ossPath !== '/') { | ||
| 36 | co(function* () { | ||
| 37 | let result = yield client.list({ | ||
| 38 | prefix: Config.ossPath.slice(1, -1), | ||
| 39 | marker: Config.ossPath.slice(0, -1) | ||
| 40 | }) | ||
| 41 | let index = 0 | ||
| 42 | if (result.objects !== undefined) { | ||
| 43 | yield result.objects.map(i => { | ||
| 44 | co(function* () { | ||
| 45 | yield client.delete(i.name) | ||
| 46 | index += 1 | ||
| 47 | if (index === result.objects.length) { | ||
| 48 | console.log(`全部删除成功~,总共${result.objects.length}个文件`) | ||
| 49 | uploadFiles() | ||
| 50 | } | ||
| 51 | }) | ||
| 52 | }) | ||
| 53 | } else { | ||
| 54 | uploadFiles() | ||
| 55 | } | ||
| 56 | }).catch(function (err) { | ||
| 57 | console.log(err) | ||
| 58 | }) | ||
| 59 | } else { | ||
| 60 | console.error('上传失败,线上路径为根目录~') | ||
| 61 | } | ||
| 62 | } | ||
| 63 | |||
| 64 | function uploadFiles() { | ||
| 65 | // 遍历目录树之后上传 | ||
| 66 | glob(Config.localPath, { | ||
| 67 | nodir: true | ||
| 68 | }, (er, files) => { | ||
| 69 | let index = 0 | ||
| 70 | files.map(i => { | ||
| 71 | co(function* () { | ||
| 72 | let ossPath = Config.ossPath.substr(Config.ossPath.length - 1, 1) === '/' ? Config.ossPath.slice(0, -1) : Config.ossPath | ||
| 73 | yield client.put(ossPath + i.slice(6), i) | ||
| 74 | index += 1 | ||
| 75 | if (index === files.length) { | ||
| 76 | consoleStr(files.length) | ||
| 77 | } | ||
| 78 | }).catch(function (err) { | ||
| 79 | console.error(err.params.object) | ||
| 80 | }) | ||
| 81 | }) | ||
| 82 | }) | ||
| 83 | } | ||
| 84 | |||
| 85 | function consoleStr(length) { | ||
| 86 | console.log(`全部上传成功~,总共${length}个文件`) | ||
| 87 | // http.get(Config.callbackUrl, () => { | ||
| 88 | // console.log('更新缓存成功~') | ||
| 89 | // }).on('error', (e) => { | ||
| 90 | // console.error(`错误: ${e.message}`) | ||
| 91 | // }) | ||
| 92 | } | ||
| 93 | |||
| 94 | // 清空目录后上传 | ||
| 95 | // deleteFiles() | ||
| 96 | |||
| 97 | // 增量上传 | ||
| 98 | uploadFiles() | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
build/ossConfig.json
deleted
100644 → 0
| 1 | |||
| 2 | { | ||
| 3 | "region": "oss-cn-shenzhen", | ||
| 4 | "accessKeyId": "LTAIhDZsL5yCN90c", | ||
| 5 | "accessKeySecret": "LIj3OEJ8cMCQeRlUVVznJpMek2dPD2", | ||
| 6 | "bucket": "kdcdn", | ||
| 7 | "localPath": "./dist/**", | ||
| 8 | "ossPath": "/app/rtdn/", | ||
| 9 | "callbackUrl": "http://nodejs.org/dist/index.json" | ||
| 10 | } | ||
| 11 | |||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| ... | @@ -78,8 +78,6 @@ let vueInstance = new Vue({ | ... | @@ -78,8 +78,6 @@ let vueInstance = new Vue({ |
| 78 | * 根据需要看放内存还是放localStorage | 78 | * 根据需要看放内存还是放localStorage |
| 79 | * | 79 | * |
| 80 | * 具体方法访问方法见 首页index.js mounted方法 | 80 | * 具体方法访问方法见 首页index.js mounted方法 |
| 81 | * 具体方法访问方法见 首页index.js mounted方法 | ||
| 82 | * 具体方法访问方法见 首页index.js mounted方法 | ||
| 83 | */ | 81 | */ |
| 84 | function initQueryConfig() { | 82 | function initQueryConfig() { |
| 85 | 83 | ... | ... |
-
Please register or sign in to post a comment