Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
470e2cca by simon
Options

默认提交

1 parent 793d2d63
Inline Side-by-side
Showing 4 changed files with 116 additions and 126 deletions
# vue-cli3-framework
## Project setup
# 中国平安人寿(香港)
## 介绍
中国平安人寿(香港) 官网
## 开始使用
### 安装依赖 (建议使用国内镜像)
```
npm install
```
### Compiles and hot-reloads for development
### 项目预览
```
npm run dev
```
### Compiles and minifies for production
### 项目打包
```
npm run build
```
### Run your tests
### 项目打包 -- 沙箱
```
npm run test
npm run sandbox
```
### Lints and fixes files
## 项目结构
```
npm run lint
.
├── build // webpack相关配置文件
├── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录
├── node_modules // 依赖包
├── public // 静态资源目录
├── src // 开发目录
│   ├── api // 数据请求模块
│   ├── assets // 开发相关的静态文件原始资源
│  │   ├── fonts //字体文件
│  │   ├── images // 图片文件
│  ├── common // 通用内容
│  │   ├── lang // 国际化语言包
│   ├── components // 公共组件
│   ├── const // 静态数据
│   ├── mock // 本地数据模拟
│   ├── pages // 页面
│   ├── store // 状态管理
│   ├── style // 公共样式
│   ├── utils // 工具类
│   ├── App.vue // 根组件
│   ├── main.js // 文件入口
│   ├── router.js // 路由
├── test // 测试模块
├── babel.config.js // babel配置文件
├── postcss.config.js // postcss配置文件
├── package.json // 通过src 目录编译后生成的缓存目录
├── README.md // 项目说明
└── vue.config.js // vue 配置
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
## 前置说明
### 开发环境
脚手架版本: CLI3
node版本: 推荐v12.10.0或以上
npm版本: 推荐6.10.3或以上
## 规范说明
### vue文件分离
一般业务.vue文件通常会在同一目录下拆分为.vue,.js,.scss三个文件。
正常的创建和引用vue文件都是html、css、js三者在一起的，这样写起来虽然方便了，但是页面比较大或者代码比较多的情况下，即使使用组件有时代码也比较多，简单来说查找不变不利于编程，大的来说影像优化性能。将代码中的html、css、js分离出来是个很好的选择。
### 编码规范
本项目不使用eslint代码检查工具。
开发人员需遵循vue官方风格规范。
### 样式规范
- 优先使用 _var.scss 声明的样式变量
- font-family 名字顺序 Arial -> Microsoft YaHei
### z-index权重划分
遮罩蒙层:5000
导航栏:3000
element-ui:2000+
自定义交互组件 如date-picker: 800-900
一般业务级:小于100
- 遮罩蒙层:5000
- 导航栏:3000
- element-ui:2000+
- 自定义交互组件 如date-picker: 800-900
- 一般业务级:小于100
### 响应式方案
通过purecss+@media方式实现。
选取原因：
- 与bootstrap相比，purecss要轻量得多
### 数据加密
请求都需要进行加密。
加密方案：AES+RSA
## 国际化支持说明
### 使用说明
采用方案：[i18n](https://github.com/kazupon/vue-i18n)
在文件入口main.js注入i18n
### 三语支持(默认繁体):
- 繁体[tc]
- 简体[zh]
- 英文[en]
### 执行逻辑
访问页面时，会先从localStorage里获取历史选取语言，若活动结果为空，则默认使用繁体。
语言切换时，把当前选择语言注入到i18n并埋到localStorage，同时广播事件，通知页面初始化(重新读取cms内容)。
## TODO
- [x] 项目后期需补充 SEO优化插件 PrerenderSPAPlugin
......
/**
* Created by pc on 2018/5/11.
* 需要的库为(co, ali-oss, glob)
* npm i co ali-oss glob --save
* ossConfig.json格式如下
{
"region": "oss-cn-shanghai", //OSS region
"accessKeyId": "XXXXXXXX", //OSS accessKeyId
"accessKeySecret": "XXXXXXXX", //OSS accessKeySecret
"bucket": "ogo", //OSS bucket
"localPath": "./dist/**", //本地需要上传的文件目录,(/**)为遍历根号后所有目录
"ossPath": "/mobile/", //oss线上文件目录(不能为根目录,避免误操作,最后加上'/')
"callbackUrl": "http://nodejs.org/dist/index.json" //预留请求服务器更新缓存的API
}
*
*
*/
let co = require('co')
let OSS = require('ali-oss')
let glob = require('glob')
let http = require('http')
let Config = require('./ossConfig.json')
// 配置oss信息
let client = new OSS({
region: Config.region,
accessKeyId: Config.accessKeyId,
accessKeySecret: Config.accessKeySecret,
bucket: Config.bucket
})
// 删除线上目录
function deleteFiles() {
if (Config.ossPath !== '' && Config.ossPath !== '/') {
co(function* () {
let result = yield client.list({
prefix: Config.ossPath.slice(1, -1),
marker: Config.ossPath.slice(0, -1)
})
let index = 0
if (result.objects !== undefined) {
yield result.objects.map(i => {
co(function* () {
yield client.delete(i.name)
index += 1
if (index === result.objects.length) {
console.log(`全部删除成功~,总共${result.objects.length}个文件`)
uploadFiles()
}
})
})
} else {
uploadFiles()
}
}).catch(function (err) {
console.log(err)
})
} else {
console.error('上传失败,线上路径为根目录~')
}
}
function uploadFiles() {
// 遍历目录树之后上传
glob(Config.localPath, {
nodir: true
}, (er, files) => {
let index = 0
files.map(i => {
co(function* () {
let ossPath = Config.ossPath.substr(Config.ossPath.length - 1, 1) === '/' ? Config.ossPath.slice(0, -1) : Config.ossPath
yield client.put(ossPath + i.slice(6), i)
index += 1
if (index === files.length) {
consoleStr(files.length)
}
}).catch(function (err) {
console.error(err.params.object)
})
})
})
}
function consoleStr(length) {
console.log(`全部上传成功~,总共${length}个文件`)
// http.get(Config.callbackUrl, () => {
// console.log('更新缓存成功~')
// }).on('error', (e) => {
// console.error(`错误: ${e.message}`)
// })
}
// 清空目录后上传
// deleteFiles()
// 增量上传
uploadFiles()
\ No newline at end of file
{
"region": "oss-cn-shenzhen",
"accessKeyId": "LTAIhDZsL5yCN90c",
"accessKeySecret": "LIj3OEJ8cMCQeRlUVVznJpMek2dPD2",
"bucket": "kdcdn",
"localPath": "./dist/**",
"ossPath": "/app/rtdn/",
"callbackUrl": "http://nodejs.org/dist/index.json"
}
\ No newline at end of file
......@@ -78,8 +78,6 @@ let vueInstance = new Vue({
* 根据需要看放内存还是放localStorage
*
* 具体方法访问方法见 首页index.js mounted方法
* 具体方法访问方法见 首页index.js mounted方法
* 具体方法访问方法见 首页index.js mounted方法
*/
function initQueryConfig() {
......