470e2cca by simon

默认提交

1 parent 793d2d63
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
......
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
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
......