Skip to content

H
hls-webapp-cli
Commit 6d7ff617 authored by Nature's avatar Nature
Browse files
Options

doc

parent db0ab990
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 908 deletions
docs/.vuepress/config.js deleted 100644 → 0
View file @ db0ab990
// https://vuepress.vuejs.org/zh/config
const themeConfig = require('./theme-config')
module.exports = {
base: '/hippius-docs/init/',
title: 'Hippius Init',
description: 'Hippius docs',
themeConfig,
}
docs/.vuepress/override.styl deleted 100644 → 0
View file @ db0ab990
$accentColor = #1F8CEB
\ No newline at end of file
docs/.vuepress/theme-config.js deleted 100644 → 0
View file @ db0ab990
// https://vuepress.vuejs.org/zh/default-theme-config
module.exports = {
nav: [{ text: '首页', link: '/' }],
sidebar: [
{
title: '初始化',
collapsable: false,
children: ['/'],
},
{
title: '开发指南',
collapsable: false,
children: ['eslint-guide', 'stylus-guide', 'http-guide', 'router-guide', 'store-guide', 'i18n-guide', 'git-commit-validate-guide'],
},
{
title: '高级配置',
collapsable: false,
children: ['env-config-guide','flexible-guide'],
},
{
title: '海马汇开发',
collapsable: false,
children: ['hmap-guide', 'hmap-deploy', 'hand-maintain'],
},
{
title: '加入我们',
collapsable: false,
children: ['join'],
},
],
}
docs/README.md deleted 100644 → 0
View file @ db0ab990
# hippius-vue-init
## 项目初始化
```bash
# 注意将vue cli更新到最新版本，低版本可能报错
# <project_name> 替换成 项目名称
vue init https://rdc.hand-china.com/gitlab:hmap-cloud-develop/hippius-vue-init <project_name> -c
```
### 构建命令
```bash
# install dependencies
yarn
# 安装 chromedriver 可能会报错，源镜像被墙了，换成淘宝镜像
# yarn config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver
# 开发环境：使用 src/data/dev.env.js 配置，with hot reload
yarn start | yarn run dev
# 构建测试环境包：使用 src/data/alpha.env.js 配置，会自动引入vConsole调试工具。输出到 /dist
yarn run build:alpha
# 构建生产环境包：使用 src/data/prod.env.js 配置。输出到 /dist
yarn run build
# build for production and view the bundle analyzer report
yarn run build --report
# run unit tests：使用 src/data/test.env.js 配置
yarn run unit
# run e2e tests
yarn run e2e
# run all tests
yarn test
```
## 目录结构
* api 目录 (存放与接口调用相关资源)
* assets 目录 (存放项目需要引用的资源)
* fonts 目录 (字体资源)
* images 目录 (图片资源)
* stylus 目录 (全局通用的 stylus 样式资源)
* components 目录 (存放项目中的 vue 组件)
* data 目录 (存放项目中需要用到的配置数据)
* i18n 目录 (存放国际化处理的数据文件)
* libs 目录 (存放一些无法通过 npm 安装的第三方库)
* router 目录 (存放 vue-router 相关配置)
* routes.js 文件 (存放 vue-router 的所有 route 配置)
* store 目录 (存放 vuex.store 相关配置)
* modules 目录 (按模块分隔 store 配置，如果是所有模块的通用配置可以直接写在 store/index.js 文件中)
* utils 目录 (存放全局共享的工具函数)
* http 目录 (存放对 axios 的一些加工处理)
* directives.js 文件 (存放全局的 vue directive)
* filters.js 文件 (存放全局的 vue filter)
* views 目录 (存放项目的所有页面展示组件)
* App.vue 文件 (主组件文件)
* main.js 文件 (入口文件)
## 全局对象
* $config (包含项目的通用配置数据，数据配置文件为 src/data/config/\*.env.js)
## 常见问题
### Failed to download ... 'git clone' failed with status 128
查看下vue-cli的版本是不是太低了：`vue --version`
推荐使用vue-cli 2.9.x 或 3.x.x
- 安装2.9.x：`npm install -g vue-cli` 或 `yarn global add vue-cli`
- 安装3.x.x：`npm install -g @vue/cli` 或 `yarn global add @vue/cli`
注意：vue-cli版本过低时可能会有个提示安装：`yarn global add @vue/cli-init`，这个命令貌似是有问题的，不要加上`-init`。
### 长时间处于 download template 状态
估计是网络问题，切换下网络试试。
### babel-polyfill
babel-polyfill 在 webpack 构建过程中已注入，无需在 main.js 中重复引入！
### 项目中使用vux注意事项
安装完vux、vux-loader、less-loader之后
修改webpack.base.conf.js文件
```js
const vuxLoader = require('vux-loader')
// 将原来moudle.exports出来的对象用const webpackConfig接收
// 然后添加以下代码
module.exports = vuxLoader.merge(webpackConfig, {
plugins: [
{
name: 'vux-ui',
},
],
})
```
docs/env-config-guide.md deleted 100644 → 0
View file @ db0ab990
# 新环境数据配置指南
项目中用到的环境数据配置存放在 `data/config` 目录下，不同环境数据单独存放在一个文件中
如果要添加一个新的环境，如 UAT 环境，需要做两步操作：
* 在 package.json 文件中的 scripts 字段中添加一行脚本，推荐在打包脚本前添加 `build:` 前缀，以 UAT 环境为例，参考 dev 和 build，只需要修改 CONFIG_ENV 为对应环境即可
* UAT 开发：`"uat": "cross-env CONFIG_ENV=uat webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",`
* UAT 打包：`"build:uat": "cross-env CONFIG_ENV=uat node build/build.js",`
* 在 `src/data/config` 目录中添加一个环境数据配置文件 `*.env.js`(\* = CONFIG_ENV，如：uat.env.js)
**注意：CONFIG_ENV 是用来指定当前脚本执行时使用哪个环境的配置数据的，所以其值必须要和自己新建的环境数据配置文件名 `uat.env.js` 中的 uat 匹配，否则将会找不到对应环境的配置数据**
_除非需要修改 webpack 配置，否则不需要添加对应环境的 webpack 配置文件_
docs/eslint-guide.md deleted 100644 → 0
View file @ db0ab990
# eslint 指南
## 风格指南
🔥 [vue 风格指南](https://cn.vuejs.org/v2/style-guide/) <br>
[eslint-standard 风格指南](https://github.com/standard/standard/blob/master/docs/README-zhcn.md)
## 配置 eslint fix
### 使用 VSCode（推荐）：
1. 安装 eslint 插件：ESLint
2. 左下角设置 -> 设置 -> 用户设置中添加如下配置
```json
"eslint.autoFixOnSave": true,
"eslint.validate": [
{ "language": "javascript", "autoFix": true },
{ "language": "javascriptreact", "autoFix": true },
{ "language": "html", "autoFix": true },
{ "language": "vue", "autoFix": true }
],
```
3. 效果：编辑文件保存时会自动 fix 代码格式。
### 使用 Atom：
1. 找到 settings -> install 安装 package： 'linter-eslint'
2. 找到 settings -> package -> linter-eslint:settings 勾选 'fix errors on save' 和 'Lint HTML Files'
3. 效果：保存文件的时候会自动 fix 当前文件的代码格式
### 使用 WebStorm：（待补充）
### 使用命令行：
1. cmd/powershell/终端 进入工程目录，运行 node_modules/.bin/eslint --fix <path/fileName>
### 使用 webpack 配置(可能会有副作用)
1. /build/webpack.base.conf.js 中 找到 createLintingRule 中 option 中将 fix 改为 true
```js
const createLintingRule = () => ({
...,
options: {
...,
fix: true, // default: false. might cause webpack to enter an infinite build loop if some issues cannot be fixed properly.
},
});
```
2. 效果：webpack 编译的时候会 fix 所有文件的代码格式
## 常见问题
> 引入的全局变量提示未定义？在 ./eslintrc.js 中 ‘globals’ 中添加你的全局变量：
```js
"globals": {
navigator: false, // false 为只读（不能被复写），true 为该变量可被重写
}
```
> 如何在文件或行中部分禁用 eslint？
在.js 中：
```js
// eslint-disable-line // 当前行禁用
// eslint-disable-next-line // 下一行禁用
/* eslint-disable */ // 该行以下全部禁用
/* eslint-enable */ // 该行以下全部启用
```
在.vue template 中：
```html
<!-- eslint-disable-line -->
<!-- eslint-disable-next-line -->
<!-- eslint-disable -->
<!-- eslint-enable -->
```
docs/flexible-guide.md deleted 100644 → 0
View file @ db0ab990
## flexible 相关配置
该项目使用的是 ydui 的 flexible 方案，因为相比阿里的 flexible 方案，这套方案用起来方便的多，当前项目设置的根字体大小为 50px，如果根据实际情况确定需要修改该字体大小，修改 config/index.js 文件中 base 对象的 remUnit 即可，目前而言，绝大多数的情况下应该不需要修改。
如果有些 px 不想转换成 rem，如 1px，2px 转换之后可能由于数值太小在有些手机上不能正常显示了，可以使用`/*no*/`。
* 如何修改 remUnit:
* 打开 chrome 浏览器，在手机模拟模式上切换到对应的设计稿尺寸，查看此时 html 标签上的 font-size 值，使用该值，也就是说，除非 UI 设计稿尺寸调整，否则不需要修改 remUnit。
docs/git-commit-validate-guide.md deleted 100644 → 0
View file @ db0ab990
# git 校验说明
**注意：git 的校验是通过 husky 插件来实现的，husky 插件现在有一个 bug，需要在 git init 之后再安装 husky 才能起效，所以如果你 commit 的时候发现 husky 没工作，需要重新安装下 husky：`yarn upgrade husky` 或 `yarn add husky@next --dev`**
## eslint
该项目默认启用 eslint 进行 js 代码语法检查，检查不通过时将出现以下现象：
- 开发环境代码运行报错
- git commit 无法提交成功
当你执行 git commit 时，会在代码提交之前先执行 eslint 校验暂存区中的 js 或 vue 文件，如果 eslint 语法检查不通过，将会阻止本次提交。
如果想定制 eslint 校验规则，修改 .eslintrc.js 文件，在其中的 rules 对象中添加想用的规则。
如果你的项目不想使用 eslint，将 `config/index.js` 文件中的 `dev.useEslint` 设置为 false 即可 (推荐启用 eslint)
## commit message
同 eslint 校验，提交信息也需要校验通过才能提交成功，即 `git commit -m 'xxx'` 中 xxx 必须符合提交规范。
我们采用当下流行最广的 angular 团队的规范，结构为：`<type>(<scope>): <subject>`，具体规范要求查看下面链接
- [Commit message 和 Change log 编写指南](http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html)
### 使所有项目成为 Commitizen-friendly
通常我们使用 git commit 来提交代码，如果你想使用 git cz 来代替 git commit，使提交代码时出现提交选项，可以做如下配置：
[Commitizen cz-cli - Github](https://github.com/commitizen/cz-cli)
- 全局安装 commitizen：`npm install -g commitizen`
- commitizen 提供了 git cz 命令来替代 git commit，此时 git cz 等价于 git commit
- 全局安装 commitizen 适配器：`npm install -g cz-conventional-changelog`
- 该适配器用来修改 git cz 的行为，使用这个之后 git cz 的行为和 git commit 不一样了，执行 git cz 时会出现 commit message 选项，且错误提示信息也发生改变
- 执行 CLI 在主目录中添加.czrc 配置文件：`echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc`
- 这个配置文件用来指定 commitizen 适配器路径，否则 cz-conventional-changelog 无法生效
此时在我们的任意 git 项目中都已经可以使用 commitizen 了，使用 git cz 来替代 git commit 即可，git commit 中的所有可选参数都包含在 git cz 中。
docs/hand-maintain.md deleted 100644 → 0
View file @ db0ab990
# 汉得内部子应用维护
## vue 子应用（2017-2018 初）
### 开始
[git 仓库地址](https://code.choerodon.com.cn/mobile-center-hmap/vue.git)：`https://code.choerodon.com.cn/mobile-center-hmap/vue.git`
找到相应负责人申请该仓库的开发者权限。
切换到 `develop` 分支。
### 构建命令
```bash
# 开发环境运行，使用 src/config/config.json 配置
yarn dev
# 测试环境包，使用 src/config/config-test.json 配置。输出到 /dist
yarn build # 部分子应用可能为 yarn build-test ，具体需查看 package.json
# 生产环境包，使用 src/config/config-prod.json 配置。输出到 /prod
yarn build-prod
```
### 目录结构
⚠️ 主目录下每一个文件夹都是一个单独的子应用。
* common （前期部分子应用可能依赖于该文件夹）
* emp-statement （发了吗：嘉航）
* group-active （群活动）
* group-bannerMessage （banner消息：凯华）
* group-corpMessage （企业频道消息：凯华）
* group-notice （群通知）
* group-questionnaire （群问卷：嘉航）
* group-vote （群投票）
* my-footprint （我的足迹）
* my-footprint-h5 （我的足迹分享页）
* vue-bus （班车信息：凯华）
* vue-contract-manage （CRM合同管理）
* vue-house （房屋转租）
* vue-house-share （房屋转租分享页）
* vue-suggest （我要吐槽）
### 常见问题
⚠️ 需要注意有些子应用为离线子应用。判断应用类型可以查看 后台管理页面 -> 子应用管理 -> 应用详情。
> 地图开发指南
[百度地图示例](http://lbsyun.baidu.com/jsdemo.htm)
[百度地图 API](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html)
> my-footprint（我的足迹）在开发环境中无法定位成功？
开发环境为 IP 定位，可能需要科学上网。测试/生产环境使用的是 GPS 定位，不存在此问题。
> my-footprint（我的足迹）与 my-footprint-h5（我的足迹活动页）如何通信？
my-footprint-h5 是一个单独部署的页面，通过 iframe 的方式嵌入 my-footprint 中。其中使用 postMessage 进行通信。
当 my-footprint-h5 被分享出去时，实际上是在页面链接后拼接上一个 `userId`，通过获取该字段，拿到用户的相关信息。
## ionic 子应用（2017 年前）
### 开始
[git 仓库地址](https://rdc.hand-china.com/gitlab/hmap-cloud-develop/hmap-subApp.git): `https://rdc.hand-china.com/gitlab/hmap-cloud-develop/hmap-subApp.git`
找到相应负责人申请该仓库的开发者权限。
因为历史遗留原因，所有 ionic 应用都在一个工程中，通过手动更改 app.js、gulpfile.js 等文件以达到打出不同子应用的包的目的。
**打不同包时需要修改的文件有：**
1. app/app.js
2. app/theme/app.core.scss
3. gulpfile.js（可能需要）
因为该方式过于鬼畜，所以后续的部分子应用已单独到一个 git 分支中，这样直接切换分支就行。建议后续维护的过程中，将子应用都划分到不同 git 分支。
因为历史遗留原因，**ionic 子应用无法在开发环境直接运行**，需打包到手机上才能看到效果。当然你也可以自由发挥，通过其它操作运行在开发环境。
### 构建命令
```bash
# 打包
# 不同的子应用打包命令不同，具体请查看 gulpfile.js 最底部。运行指定的 gulp task 即可
```
docs/hmap-deploy.md deleted 100644 → 0
View file @ db0ab990
# 子应用部署指南
## 打包
```bash
# 测试版海马汇（测试环境）打包，输出到 /dist
yarn build:alpha
# 正式版海马汇（正式环境）打包，输出到 /dist
yarn build
```
⚠️ 不同的包与环境不能弄错，否则会造成无法登录等后果。
## 部署
### 测试环境
#### 第一步：找到相应负责人 黄昊(8467) 申请[测试环境中台](http://wechat.hand-china.com/hippius-admin)登录权限。
测试环境中台地址：`http://wechat.hand-china.com/hippius-admin`
#### 第二步：下载测试版海马汇
中台找到 应用管理 -> 应用版本管理，点击进入相应的平台。
![步骤1](img/download-1.png)
找到版本设置下的最新版本的 下载地址，复制该地址，在手机上打开下载安装。
![步骤2](img/download-2.png)
#### 第三步：中台找到 应用管理 -> 子应用管理。根据需求新建应用或编辑现有应用。
新建子应用流程：
1. 新建应用
![步骤1](img/hmap-1.png)
2. 选择`应用类型`，如果是全屏应用，需选择 `隐藏导航`
![步骤2](img/hmap-2.png)
3. 点进去你刚刚新建的应用，找到版本新建
![步骤3](img/hmap-3.png)
4. 新建版本
**在线子应用**需将打包后的 dist 文件夹重命名成子应用的名称，如 `testName` ，然后发给相应负责人上传到测试环境服务器（建议使用图形化工具操作，如 `Transmit`、`FileZilla`）。
代码资源为 `http://wechat.hand-china.com/hmapshowcase/oauth/authorize?&client_id=a765ff3f-8d33-49b4-a9c9-48e991544242&response_type=code&redirect_uri=http://wechat.hand-china.com/testName/index.html`
需将代码资源路径最后的 `testName` 改为你上面重命名的名称。（根据上传路径的不同，代码资源最后的 `redirect_uri` 也需相应变化）
⚠️ _一般情况下代码资源的前面部分都是固定的，只有最后的 `redirect_uri` 需要更改。如果在外交付的产品 `client_id` 有变化，则 `client_id` 也需要更改，具体参考[后端文档](https://hmap.hand-china.com/hippius-api/10013.html)_
![步骤4](img/hmap-4.png)
**离线子应用**先将 dist 文件夹压缩成 zip 包并点击 `上传包`。
资源目录为 `dist/index.html`。
若包文件夹名称非 `dist`，则资源目录路径也需要更改成相同名称。
⚠️ _压缩 zip 包时尽量使用操作系统自带的压缩工具，曾经有 windows 上用第三方工具压缩后打开白屏的案例。_
![步骤5](img/hmap-5.png)
5. 海马汇应用 tab 页下拉刷新，应用版本即会更新。（特殊情况可能需要杀掉进程重启海马汇或退出登录重新进入）
### 正式环境
跟测试环境部署流程相同，url 地址变更为正式环境地址。需发给有相应权限的负责人操作。
## 调试
### 方式一：vconsole 调试
通过 `yarn build:alpha` 打出的包，vconsole 会自动引入。
![调试方式1](img/hmap-test-1.png)
### 方式二：真机调试（必须是有打开调试模式的测试安装包）
**安卓**通过数据线连上电脑，chrome 中地址栏输入 `chrome://inspect/` 找到页面调试。
**iOS**需要原生帮助在你的 xcode 上跑测试版海马汇，然后打开 safari（需勾选 偏好设置 -> 高级 -> 在菜单栏中显示开发菜单），找到开发菜单中的页面调试。
![调试方式2](img/hmap-test-2.png)
### 方式三：vorlon 远程调试
[vorlon 官网](http://www.vorlonjs.com/)
docs/hmap-guide.md deleted 100644 → 0
View file @ db0ab990
# 子应用开发指南
## 开发流程
1. 在入口文件 src/main.js 中引入 hmap 环境(若项目生成的时候选择了 HMAP ，则该步骤已默认引入）
```js
// src/main.js
import '@/platform/hmap/env'
```
⚠️ 默认为 在线子应用 的环境。若为 本地子应用，可修改 `src/platform/hmap/env.js` 注释掉在线子应用部分，打开离线子应用的注释，同时删除 `static/` 下的 `cordova` 文件夹。
2. 在你需要的时机使用 hmap 登录
```js
// 在 app.vue 中
import hmapLogin from '@/platform/hmap/login'
export default {
/* ... */
async mounted() {
// Tips：hmapLogin 会自动判断环境以采用相应的登录方式，所以构建的包需放在相应的环境才能正确登录
// yarn dev 为模拟登录。yarn build:alpha 测试版海马汇环境。yarn build 正式版海马汇环境。
/**
* hmapLogin 登录总成
* @param {String} [type] 应用类型：可选:'online''local' 默认:'online'
* @param {Boolean} [needInfo] 是否需要获取用户详细信息 默认: true
* @return {Object.Promise} 返回一个promise。若登录成功PromiseValue为数据对象/登录失败PromiseValue 为 false
*/
const res = await hmapLogin()
// 使用promise写法：
hmapLogin().then(res => {})
},
/* ... */
}
```
## 参考资料
[海马汇项目实施文档](http://eco.hand-china.com/doc/hmap-cloud/latest/part5/chapter1.html)
docs/http-guide.md deleted 100644 → 0
View file @ db0ab990
# http 使用指南
## 说明
http 为基于 axios 二次封装，使用方式保持与 axios 一致。
[axios 官方教程](https://github.com/axios/axios)
## 使用指南
1. 在 src/api 文件夹下定义你的业务相关接口函数并导出
```js
// api/home.js中
import http from '@/utils/http'
// 注意：http 中会自动给 url 前拼接环境定义的 baseUrl。定义的 url 中无需包含 baseUrl
// 如需修改环境配置参数（如：baseUrl），可在 src/data/config 下修改
// http 中默认会携带 localStorage.token（若采用hmap login方法，localStorage.token 会在登录成功后写入），无需手动设置
// 仅仅放心的去使用它 ：）
export function getSomething() {
const url = '/fetch'
return http.get(url)
}
export function postSomething(data) {
const url = '/fetch2'
return http.post(url, data)
}
```
2. 在你的 src/views/ 页面中导入你需要用到的接口函数，使用它
```js
// views/home.vue中
import { getSomething, postSomething } from 'api/home'
export default {
/* ... */
methods: {
async handle() {
// 使用 async/await 写法时方法前要加 async
// 使用 async/await 写法（推荐）
try {
const data = {} // post参数
const res = await postSomething(data) // res即为response.data
} catch (e) {
// 处理error
}
// 使用 promise 写法
getSomething()
.then(res => {
// 注意：res即为response.data，不需要进行response.data.success === true的判断
// 若项目接口无 response.data.success 字段，修改 src/utils/http/interceptors.js 第13行
})
.catch(err => {
// 所有error情况统一在此处理，包括返回状态码为200，和 response.data.success 为 false 的情况。http 内部默认会对一些错误码做提示（alert）处理
})
},
},
/* ... */
}
```
## 不统一处理接口返回的 success 字段
如果项目接口规范不到位，或者因为一些原因无法做到所有接口返回中都有 success 字段，那么可能无法对 success 字段做统一处理，需要修改下 src/utils/http/interceptors.js 文件：
```js
// 请求返回之后的预处理函数：若返回状态码为200，但实际请求未完成，将异常处理统一到错误处理
const responseAfter = response => response.data.success ? response.data : Promise.reject(response)
// 若项目接口无 response.data.success 状态字段，注释上一行，使用下行
// const responseAfter = response => response
```
改为
```js
// 请求返回之后的预处理函数：若返回状态码为200，但实际请求未完成，将异常处理统一到错误处理
// const responseAfter = response => response.data.success ? response.data : Promise.reject(response)
// 若项目接口无 response.data.success 状态字段，注释上一行，使用下行
const responseAfter = response => response
```
然后自行对每个接口单独做处理。
docs/i18n-guide.md deleted 100644 → 0
View file @ db0ab990
# i18n 极简使用指南
* [vue-i18n - github](https://github.com/kazupon/vue-i18n)
* [vuex-i18n - github](https://github.com/dkfbasel/vuex-i18n)
*i18n 配置文件在 i18n 目录中*
vue 有两个支持 i18n 的插件，vuex-i18n 使用起来舒服一些，但需要依赖 vuex，所以如果使用 cli 生成项目时，选择使用 vuex，项目中会默认配置 vuex-i18n 作为多语言插件，否则使用 vue-i18n，以下是两个插件最基本的用法，更加详细用法请自行查阅文档
**vue-i18n**
```js
// 以下三种用法都可以，但作为对象名时不能添加空格
// 如下：'project name'可以，'message key.projectName'不行
{{ $t('projectName') }}
{{ $t('message.projectName') }}
{{ $t('message-key.projectName') }}
// 切换语言
this.$i18n.locale = 'en'; // 默认是中文，zh
```
**vuex-i18n**
```js
// 以下四种用法都可以
// 数据存在store中，所有的对象子属性都会被转成store.state中的字符串键来存储，用.连接
{{ $t('projectName') }}
{{ $t('message.projectName') }}
{{ $t('message-key.projectName') }}
{{ $t('message key.projectName') }}
// 切换语言
this.$i18n.set('en'); // 默认是中文，zh
```
## 项目后期追加 i18n 配置
如果早期项目没考虑要做国际化，因此项目创建时没加入 i18n 配置，而后期需要追加国际化，此时需要做如下几步：
1. 使用初始化项目命令重新创建一个和当前项目配置相同的空项目，并选择使用 i18n
2. 将新创建项目的 src/i18n 目录拷贝到当前项目的 src 目录下
3. 将新创建项目中 src/main.js 文件中和 i18n 相关的内容，拷贝到当前项目的 src/main.js 文件中
4. 根据项目的需求安装对应的 i18n 插件，vue-i18n 或 vuex-i18n
docs/join.md deleted 100644 → 0
View file @ db0ab990
# hippius-init 开发指南
## 快速参与
[git 仓库地址](https://rdc.hand-china.com/gitlab/hmap-cloud-develop/hippius-vue-init.git): `https://rdc.hand-china.com/gitlab/hmap-cloud-develop/hippius-vue-init.git`
方式一：
1. 找到相应负责人申请该仓库的开发者权限。
2. 修改后提交一个 pr，等待核心开发者 merge。
方式二：
1. fork 该项目。
2. 修改后提交一个 pr，等待核心开发者 merge。
## 目录结构
* docs (文档目录)
* template (模版目录)
## 模版开发
因为脚手架为一个模版，无法直接运行。
需先初始化一个完整工程，在该工程上修改并查看效果。
最后再将修改转移到模版上。
模版语法参考 [vue-template-webpack](https://github.com/vuejs-templates/webpack)
## 文档开发
```bash
# 全局安装 vuepress（注意：node 8+）
npm i -g vuepress
# 在项目目录下运行
vuepress dev docs
```
[vuepress 官方教程](https://vuepress.vuejs.org/zh/guide/)
## 文档部署
```bash
# 文档打包
vuepress build docs
```
将 `docs/.vuepress/dist/` 文件夹下的内容部署到服务器 static 静态文件夹下的路径 `/hippius-docs/init/`
docs/router-guide.md deleted 100644 → 0
View file @ db0ab990
# route 对象添加指南
* [vue-router 官方文档](https://router.vuejs.org/zh-cn/)
router 的所有配置存放在 router 目录下面，router 的配置按模块分块如果需要添加一个模块的 router 配置，只需要执行以下步骤：
1. 在 `router/modules` 目录下添加一个 js 文件，文件名以 camel 形式命名
2. 在添加的 js 文件中添加对应模块的 route 配置，形如：
```js
import Home from '@/views/Home'
const routes = [
{
path: '/Home',
name: 'Home',
component: Home,
},
]
export default routes
```
3. 将新添加的配置文件在 `router/routes.js` 文件中引入，形如：
```js
import home from './modules/home'
export default [
...home,
{
path: '*',
redirect: '/home',
},
]
```
docs/store-guide.md deleted 100644 → 0
View file @ db0ab990
# vuex store 使用指南
* [vuex 官方网址](https://vuex.vuejs.org/zh-cn/)
store 配置是按模块区分的，所以添加配置时同一个模块的 store 放在一个文件中添加新的
store 配置很简单，步骤如下：
1. 在 `store/modules` 目录下添加模块对应的 store 文件，内容格式如下：
```js
const state = {
increment: 0,
}
const getters = {}
Object.keys(state).forEach(prop => {
getters[prop] = state => state[prop]
})
const mutations = {}
Object.keys(state).forEach(prop => {
const setProp = `set${prop.charAt(0).toUpperCase()}${prop.slice(1)}`
mutations[setProp] = (state, payload) => {
state[prop] = payload
}
})
// actions不做统一处理，因为大多数情况下，并不需要使用异步设置值
// 若需要使用actions，注意：mutation_type的命名规则为set开头加上state对象属性的camel形式
// const actions = {
// async setIncrement({ commit }, value) {
// commit('setIncrement', await value);
// },
// };
const actions = {}
export default {
state,
getters,
mutations,
actions,
}
```
要添加缓存数据时，只需要在 state 对象中添加属性即可，getters 和 mutations 对象通常不需要修改
由于根据以往项目经验，很少会用到异步修改值的功能，所以 actions 没做统一处理，若需要自行拓展，按以上注释掉的部分修改即可
2. 在 `store/index.js` 文件中引入添加的 store 文件，并在 modules 字段中注入，如下：
```js
import helloWorld from './modules/helloWorld'
export default new Vuex.Store({
modules: {
helloWorld,
},
state: {},
getters: {},
mutations: {},
actions: {},
})
```
如果有些 store 属性是全局的，不属于某个模块，可以直接在 `store/index.js` 如上几个空对象中添加
## 组件中使用 store 属性
所有的 state 中的属性都会在 getters 中生成同名的属性，以及在 mutations 中生成以 `set + 首字母大写的 state 属性` 的属性，所以用法如下：
```js
import {
mapGetters,
mapMutations,
// mapActions,
} from 'vuex'
export default {
computed: {
...mapGetters(['increment']),
},
methods: {
...mapMutations(['setIncrement']),
// ...mapActions(['setIncrement']),
click() {
this.setIncrement(this.increment + 1)
},
},
}
```
docs/stylus-guide.md deleted 100644 → 0
View file @ db0ab990
# stylus 指南
## 语法
[stylus 官网](http://stylus-lang.com/)
### 风格
> ⚠️ 因为 stylus 语法过于灵活，缺乏约束，部门将统一采用下列的风格约束。
1. 保留大括号、冒号、分号的语法（类似于 scss）。
2. 变量定义统一 $ 开头。
3. 函数/mixin 调用保留小括号，参数使用逗号隔开。
### 基础指引
```stylus
// 定义变量
$baseColor = #1F8CEB;
// 定义mixin，并给定参数默认值
do-something($color = $baseColor) {
border: 1px solid $color;
}
// 使用定义的变量和mixin
.example {
color: $baseColor;
do-something();
}
```
## 模版已带的样式
### 1px 边框
使用方式一：公共样式类
```html
<div class="border-top-line"></div>
<div class="border-bottom-line"></div>
<div class="border-left-line"></div>
<div class="border-right-line"></div>
```
使用方式二：mixin 方法
```stylus
// 引入公共变量和公共mixin
@import '../../assets/stylus/import.styl';
// 使用
.example {
// 单边边框
border-line(bottom);
border-line(top);
border-line(left);
border-line(right);
// 改变颜色
border-line(bottom, #000);
// 四周边框
border-radius-line();
// 改变颜色
border-radius-line(#000);
// 加上圆角
border-radius-line(#000, 20px);
}
```
## 常见问题
> 为什么是 stylus 而不是 sass/scss ?
1. 为了规避 node-sass 因为一些原因可能导致的安装失败和编译时间过长的问题。
2. stylus 的语法更接近 js，更强大，更友好。
> 特殊情况下，如何规避工程默认的 px 自动转换成 rem？
在该行样式的后面加上 `/*no*/` ，则该行的 `px` 单位不会被转换为 `rem`。
```stylus
border: 1px solid #000; /*no*/
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment