ai-taurus

v0.0.9

Published

2 years ago

A Front-End Solution Based on Vue.js

Downloads

0High
0Medium
0Low

harwin

[TOC]

Taurus业务开发快速上手指南

工程环境搭建

安装 NodeJS

到官网下载安装最新版本NodeJS。

注意：
请安装LTS版本的NodeJS，Current版本是尝鲜版本，不稳定，所以不要装这个版本！
NodeJS版本必须是v4.4.7及以上版本！由于前端相关生态环境更新比较快，因此，NodeJS后续可能会升级。

安装编译所需的依赖包

在业务工程跟目录中执行以下命令安装编译前端代码所需的依赖包：

npm install

注意：因为之后的编译动作都将依赖这些NPM包，所以请保证这个安装过程是正常完成的，否则编译很可能不能正常进行。

构建工程

工程构建分为开发和产品两种模式。

开发模式构建

npm run dev

默认情况下，执行以上命令成功后，默认在8080端口将启动一个web server（你可以浏览到工程自带的页面，如：http://localhost:8080/sample/page-demo/index.html），此时，工程源码是支持热加载的（即：当修改了源码后浏览器将立即自动刷新页面展现结果）！

注意：如果你需要修改默认端口号，请修改工程目录的config/index.js文件内的端口定义。

产品模式构建

npm run build

工程目录说明

工程目录结构如下：

./
└── biz  <业务模块工程>
    ├── README.md  <工程描述文件>
    ├── build  <工程构建脚本目录>
    ├── config  <工程构建配置目录>
    ├── dist  <工程发布目录，里面放置工程编译后的内容>
    ├── package.json  <npm包配置文件>
    └── src  <源码目录>
        ├── assets  <静态资源目录>
        │   ├── amcharts  <amcharts开源库目录>
        │   ├── img  <图片目录>
        │   ├── css  <样式目录>
        │   └── fonts  <字体目录>
        ├── i18n  <国际化资源文件目录>
        │   ├── agent  <agent-view业务模块语言资源文件目录>
        │   ├── eshop  <eshop业务模块语言资源文件目录>
        │   ├── self  <self-care业务模块语言资源文件目录>
        │   └── <其他业务模块语言资源文件目录... ...>
        ├── common  <业务组件目录>
        ├── agent-view  <agent-view业务模块源码目录>
        ├── eshop  <eshop业务模块源码目录>
        ├── self-care  <self-care业务模块源码目录>
        └── <其他业务模块目录... ...>

开发流程

在src目录对应业务模块目录内创建一个子目录，如：src/eshop/abc；

注意：业务模块目录名称为各业务模块编码，此编码是预先定义好的！

在src/eshop/abc内创建index.js和index.html两个文件；
在index.js里必须首先引入Taurus相关的模块。如：
```
import {taurus, TSwitcher, TDoughnut} from 'aii-taurus';
```
注意：index.js和index.html两个文件是此页面入口，编译脚本依赖了这两个名称，所以不能将这两个文件改名！
在命令行控制台进入工程根目录，输入以下命令启动开发环境：
```
npm run dev
```
打开浏览器访问此页面对应的地址。开发过程中，只要代码变更(进行保存操作)，浏览器对应页面里的内容将自动刷新。
页面开发完成后，输入下面的命令进行发布：
```
npm run build
```
构建完成后，发布内容将全部生成在dist目录内。

国际化

Taurus使用vue-i18n进行国际化处理。

语言资源文件和目录

在工程src目录下有一个i18n目录(此i18n目录在编译发布后将放置在dist目录下)，此目录内放置国际化语言资源文件。

注意：在i18n目录中，各模块的语言文件将被放置在各模块对应的子目录内，这些子目录与工程根目录下的模块子目录名称应该保持一致！

所有语言资源文件都为json格式，使用以下格式命名：

[ISO 3166-2][iso_3166-2]两位小写国家代码.json

如：cn.json、en.json等。以下是两个资源文件的例子：

cn.json

{
  "shoppingcart": "购物车",
  "insuranse": "保险",
  "instalment": "分期付款",
  "stock": "股票",
  "demo": {
    "hello": "你好",
    "world": "世界",
    "hi": "@:demo.hello @:demo.world !!"
  }
}

en.json

{
  "shoppingcart": "Shoppingcart",
  "insuranse": "Insuranse",
  "instalment": "Instalment",
  "stock": "Stock",
  "demo": {
    "hello": "Hello",
    "world": "World",
    "hi": "@:demo.hello @:demo.world !!"
  }
}

资源加载方式

在语言资源文件配置好后，可以以两种方式使用国际化资源。

假设当前语言为英语：

*方式一：*在HTML模版代码里可以使用$t函数来加载国际化资源。

<!-- 输出 <div>Shoppingcart</div> -->
<div>{{ $t("shoppingcart") }}</div>

<!-- 输出 <div>Hello</div> -->
<div>{{ $t("demo.hello") }}</div>

<!-- 输出 <div>Hello World !!</div> -->
<div>{{ $t("demo.hi") }}</div>

*方式二：*在组件实例里可以使用this.$t函数加载国际化资源，非组件实例内可以使用Vue.$t函数加载国际化资源。

var shoppingcart = this.$t('shoppingcart');
var hi = this.$t('demo.hi');

var shoppingcart = Vue.$t('shoppingcart');
var hi = Vue.$t('demo.hi');

语言切换

如果需要动态切换当前语言，首先需要引入taurus模块：

import {taurus} from 'aii-taurus';

//获取当前语言
console.log(taurus.lang);

//切换当前语言为中文
taurus.changeLang('eshop','cn');

开发规范（初稿）

index.html和index.js

新开发的页面推荐基于下面的模版来创建：

index.html文件模版

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- content请填写业务模块编码，此编码与i18n目录下的对应模块的子目录名称保持一致 -->
  <meta name="biz-code" content="eshop">
  <title>Title</title>
  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
  <link href="/assets/css/main.css" rel="stylesheet">
</head>
<body>
</body>
</html>

注意：name为biz-code的meta标记是必须定义的，否则，此页面的国际化内容将失效！

业务模块编码如下：

|业务模块|编码| |-------|---| |eshop|eshop| |self care|self| |agent view|agent| |resource management|res|

index.js文件模版

import {TRangeSlider} from 'aii-taurus';
new Vue({
  el: 'body', // the template entry,you can also select id (#id)
  components: {// register component
    TRangeSlider // this is a demo,select the component you wish to use
  },
  data: function() {
    return {}; // store data
  },
  events: { // event
  },
  methods: { // methods
  },
  ready: function () { // init entry
  }
});

代码书写风格

所有javascript脚本书写风格按照ESLint静态检查规则实现（不同的编辑器需要安装不同的ESLint插件，参见附录）。

注意：由于工程编译脚本已经整合ESLint进行代码静态检查，因此，如果在开发时手动禁用了ESLint插件进行静态代码检查，那么可能在编译时不能通过代码静态检查环节导致编译失败!

文件和目录

所有文件名使用全小写命名，单词之间使用-号分割，如：

box-group.vue
service.js
main.css

开发一个新页面时，你需要在src目录对应业务模块的目录里创建一个子目录，然后把该页面的源码放到此子目录中。例如：新写一个eshop业务模块的页面family时，你需要将这个页面的源码放到src/eshop/family目录内。

Vue组件

所有Vue组件注册的自定义标记都需要带上t-前缀。如：

import {TBizComp} from 'common/biz-comp';
Vue.component('t-biz-comp', TBizComp);

import {TBizComp} from 'common/biz-comp';
new Vue({
  el: 'body',
  components: {
    TBizComp
  }
});

import {TBizComp} from 'common/biz-comp';
new Vue({
  el: 'body',
  components: {
    't-box-group': TBizComp
  }
});

FAQs

Q-001：Taurus是什么？

A：

Taurus是基于Vue扩展的前端框架，它基于Veris前端框架(veris 7.x使用的前端框架)进化而来。

Q-002：Taurus对浏览器兼容性怎么样？

A：

Taurus支持IE 9+以及所有主流现代浏览器，包括：Chrome 53+、Firefox 45+、Edge 13、Safari 8+ (Mac)。

Q-003：安装工程构建依赖包的时候为什么非常慢？

A：

NPM的仓库服务器设在国外，所以视网络状况而定有些时候访问它会比较慢，有两种方法解决。

*方法一：*通过npm i cnpm -g命令安装淘宝的cnpm命令行工具，安装好后可以使用cnpm命令来替换npm做日常包管理操作，由于cnpm会连接淘宝的npm仓库镜像服务器（国内服务器），因此下载速度会大幅提升。

*方法二：*可以使用下面的命令切换NPM的源到淘宝的源，切换源成功后依旧使用npm命令进行包管理，这样也能提升下载速度。

npm config set registry http://registry.npm.taobao.org/

使用下面的命令验证是否切换成功：

npm config get registry

如果输出http://registry.npm.taobao.org/则表示源切换成功。

Q-004：没有jQuery怎样获取DOM实例？

A：

*方法一：*通过Vue的指令v-el在DOM元素上定义一个标识，然后在组件里使用this.$els访问这个元素。如：

在HTML元素上定义一个元素标识

<div v-el:my-tag><div>

在组件内部使用下面的方式访问该DIV元素实例

this.$els.myTag

注意：
v-el如果定义在table标记的子标记上无效(如：THEAD标记，另外，包括TD元素内定义的HTML元素也是无效的)！
特别的，如果定义了相同的标识，那么，通过this.$els.myTag获取的是一个实例数组，此数组的顺序是DOM元素在DOM树上的先后顺序。

*方法二：*使用浏览器提供的原生DOM方法来获得DOM实例对象，以下是一些例子：

注意：以下例子中的document都可以替换为某个DOM元素实例对象！

根据ID查找：

```js
// jQuery
$('#myElement');

// DOM API
document.getElementById('myElement');
// 或者
document.querySelector('#myElement');
```

根据CSS类查找：

```js
// jQuery
$('.myClass');

// DOM API
document.getElementsByClassName('myClass');
// 或者
document.querySelectorAll('.myClass');
```

根据标记名称查找：

```js
// jQuery
$('div');

//DOM API
document.getElementsByTagName('div');
// 或者
document.querySelectorAll('div');
```

根据属性查找：

```js
// jQuery
$('[data-group="admin"]');

// DOM API
document.querySelectorAll('[data-group="admin"]');
```

子元素查找：

```js
// jQuery
$('#myElementId').children();

// DOM API
document.getElementById('myElementId').childNodes; //包括注释和文本节点
// 或者
document.getElementById('myElementId').children; //忽略注释和文本节点

// jQuery
$('#myElementId').children('[data-group]');

// DOM API
document.querySelector('#myElementId > [data-group]');
```

后代元素查找：

```js
// jQuery
$('#myElementId A');

// DOM API
document.querySelectorAll('#myElementId A');
```

排除元素：

```js
// jQuery
$('DIV').not('.ignore');
// 或者
$('DIV:not(.ignore)');

// DOM API
document.querySelectorAll('DIV:not(.ignore)');
```

多重选择：

```js
// jQuery
$('DIV, A, SCRIPT');

// DOM API
document.querySelectorAll('DIV, A, SCRIPT');
```

Q-005：安装依赖包时出现"Error: Cannot find module 'xxxx'"错误怎么办？

A：

这是因为缺少依赖包xxxx导致的问题，解决方法是执行npm i xxxx命令安装此依赖包。

Q-006：node_modules目录能从其他地方复制过来使用吗？

A：

NodeJS版本必须是v4.4.7及以上版本

Q-007：编译时出现"Module build failed: Error: No ESLint configuration found."错误怎么办？

A：

这个错误是编译脚本没有找到ESLint对应的配置文件导致，请检查工程根目录下是否有以下文件：

.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore

注意：以上文件都是编译过程依赖的配置文件，请勿修改或删除！