|
|
|
|
# coin-exchange
|
|
|
|
|
|
|
|
|
|
## 简介
|
|
|
|
|
|
|
|
|
|
币交所 web 前台，项目简称 `CEC`
|
|
|
|
|
|
|
|
|
|
## 快速构建&部署
|
|
|
|
|
|
|
|
|
|
包管理器 `yarn` 与 `npm` 类似，下面默认只写 `yarn`
|
|
|
|
|
|
|
|
|
|
> `Node.js` 最好 `v10+`
|
|
|
|
|
|
|
|
|
|
进入项目根目录，执行 `yarn install` 安装依赖
|
|
|
|
|
|
|
|
|
|
依赖安装成功后，执行 `yarn run build` 命令进行构建
|
|
|
|
|
|
|
|
|
|
构建完成后，构建产物在 `/dist` 文件夹
|
|
|
|
|
|
|
|
|
|
## 快速开发引导
|
|
|
|
|
|
|
|
|
|
### 开发环境
|
|
|
|
|
|
|
|
|
|
> Node.js, v10+
|
|
|
|
|
>
|
|
|
|
|
> [Yarn](https://yarnpkg.com)，可选用于替代 npm
|
|
|
|
|
|
|
|
|
|
### 开发准备
|
|
|
|
|
|
|
|
|
|
1. `yarn` 或 `yarn install` 安装依赖
|
|
|
|
|
2. `yarn run serve` 启动开发热更新服务器
|
|
|
|
|
|
|
|
|
|
### 快速开发
|
|
|
|
|
|
|
|
|
|
1. 在 `page` 下新建 `demo.app.js` 入口 ，将会得到 `demo.html`。内容参考其他。
|
|
|
|
|
2. 在 `page`下新建 `demo.vue`，作为 `demo.html`页面的根组件。
|
|
|
|
|
3. 直接在 `demo.vue` 上进行开发，如有需要，引用组件。
|
|
|
|
|
|
|
|
|
|
## 项目大体流程
|
|
|
|
|
|
|
|
|
|
### 使用技术
|
|
|
|
|
|
|
|
|
|
Vue + Vue CLI 3 + Element UI + SCSS + Vue I18n
|
|
|
|
|
|
|
|
|
|
### 目录结构
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
coin-exchange
|
|
|
|
|
├─ .browserslistrc # 指定项目的目标浏览器的范围
|
|
|
|
|
├─ .editorconfig # EditorConfig, 定义基本的编码风格
|
|
|
|
|
├─ .env # 指定环境变量
|
|
|
|
|
├─ .eslintrc.js # ESlint 配置
|
|
|
|
|
├─ .gitignore
|
|
|
|
|
├─ .idea # JetBrains IDEs 项目配置
|
|
|
|
|
├─ .npmrc # npm 配置
|
|
|
|
|
├─ .prettierrc.js # Prettier 配置, 用于统一代码风格
|
|
|
|
|
├─ babel.config.js
|
|
|
|
|
├─ dist # 项目构建产品输出目录
|
|
|
|
|
├─ node_modules
|
|
|
|
|
├─ package.json
|
|
|
|
|
├─ postcss.config.js
|
|
|
|
|
├─ public # 静态资源，直接被拷贝
|
|
|
|
|
│ ├─ favicon.ico
|
|
|
|
|
│ └─ index.html # 生成 html 默认模板
|
|
|
|
|
├─ src
|
|
|
|
|
│ ├─ assets # 静态资源
|
|
|
|
|
│ ├─ common # 项目公共代码
|
|
|
|
|
│ ├─ components # Vue 组件
|
|
|
|
|
│ ├─ locales # 国际化翻译文件
|
|
|
|
|
│ │ ├─ en.js
|
|
|
|
|
│ │ ├─ zh-CN.js
|
|
|
|
|
│ │ └─ zh-HK.js
|
|
|
|
|
│ ├─ pages # 多页面入口
|
|
|
|
|
│ │ ├─ demo.app.js # 将生成 /demo.html
|
|
|
|
|
│ │ └─ index.app.js # 首页 /index.html 的入口
|
|
|
|
|
│ └─ plugins # 第三方库
|
|
|
|
|
├─ title.config.js
|
|
|
|
|
├─ vue.config.js # Vue Cli 调整 webpack 配置
|
|
|
|
|
└─ yarn.lock # Yarn 固化依赖
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 构建相关
|
|
|
|
|
|
|
|
|
|
项目基于 `vue cli3` 搭建
|
|
|
|
|
因为 vue cli 3 隐藏了 webpack 配置，通过根目录的 `vue.config.js` 进行配置、修改，具体见官网。
|
|
|
|
|
|
|
|
|
|
### 多页面入口
|
|
|
|
|
|
|
|
|
|
`src/pages` 目录中以 `.app.js` 为后缀的文件为入口文件，
|
|
|
|
|
将生成以 `src/pages` 为根目录的同层次同名的 html 。
|
|
|
|
|
|
|
|
|
|
### 公共代码
|
|
|
|
|
|
|
|
|
|
1. `src/common/page-common.js` 为页面公共 js 入口
|
|
|
|
|
2. 公共 js 引入了公共样式，其入口为 `src/common/style/index.scss`
|
|
|
|
|
|
|
|
|
|
### Element UI 自定义主题
|
|
|
|
|
|
|
|
|
|
因默认主题与项目不一致，故需要对其组件的样式进行一一的替换
|
|
|
|
|
|
|
|
|
|
自定义样式入口 `src/plugins/element.scss`
|
|
|
|
|
|
|
|
|
|
可参照 table 组件
|
|
|
|
|
|
|
|
|
|
### 国际化
|
|
|
|
|
|
|
|
|
|
1. 国际化方案基于 [Vue I18n](https://kazupon.github.io/vue-i18n/)
|
|
|
|
|
2. 国际化文件在 `src/locales` 里面
|
|
|
|
|
3. 页面显示语言判断流程，优先读取 url `lang`，其次读取 cookie，最后读取 `navigator.language` ，如读取的语言都不支持，将回退至默认语言
|
|
|
|
|
|
|
|
|
|
## 团队合作
|
|
|
|
|
|
|
|
|
|
### 代码检查 ESlint
|
|
|
|
|
|
|
|
|
|
基于 vue cli ，选择了最轻的 `vue/essential`规则
|
|
|
|
|
|
|
|
|
|
[vue 官方风格指南](https://cn.vuejs.org/v2/style-guide/)
|
|
|
|
|
[eslint-plugin-vue Available rules](https://eslint.vuejs.org/rules/)
|
|
|
|
|
|
|
|
|
|
### 代码风格 Prettier
|
|
|
|
|
|
|
|
|
|
1. 使用了 [Prettier](https://prettier.io/) 统一代码风格。
|
|
|
|
|
2. 另，也用 [EditorConfig](https://editorconfig.org/) 辅助。
|
|
|
|
|
3. 基于 vue cli 配置了 `pre-commit` gitHooks，commit 时自动格式化代码
|
|
|
|
|
|
|
|
|
|
### IDE
|
|
|
|
|
|
|
|
|
|
强烈推荐使用 `WebStorm` ，因为配置了一系列支持。
|
|
|
|
|
|
|
|
|
|
> `.idea` 目录中，排除了个人相关，将项目相关配置提交至 git 仓库，以达到项目成员共享。
|
|
|
|
|
>
|
|
|
|
|
> 因此使用 WebStorm 打开项目，无需进行设置就可以进行开发
|
|
|
|
|
|
|
|
|
|
#### 其他 IDE/编辑器？
|
|
|
|
|
|
|
|
|
|
请根据实际进行下面所以或部分设置。
|
|
|
|
|
|
|
|
|
|
1. webpack + 智能感知？因为 vue cli 3 隐藏了 webpack 配置，会导致 IDE 无法解析模块引用，进而影响智能感知和跳转。需要设置为 `<projectRoot>/node_modules/@vue/cli-service/webpack.config.js` 。详见[官方文档](https://cli.vuejs.org/zh/guide/webpack.html#以一个文件的方式使用解析好的配置)。
|
|
|
|
|
2. Eslint 实时错误提示。
|
|
|
|
|
3. 安装 [Prettier](https://prettier.io/)、 [EditorConfig](https://editorconfig.org/) 插件以得到统一代码风格支持。这是可选的，也可直接执行 `yarn run lint` 进行格式化或等待 commit 时的自动格式化。
|
