默认提交
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