自定义 Vue 组件开发规范

# 自定义 Vue 组件开发规范

## 使用平台功能

### 平台组件

PC端：[element](https://element.eleme.cn/#/zh-CN)不需要引入可以直接使用。

移动端：V7\.64之前的版本可以直接使用[cube\-ui](https://didi.github.io/cube-ui/#/zh-CN)，V7\.64之后的版本可以直接使用[vant](https://vant-contrib.gitee.io/vant/#/zh-CN/)。

### 平台开发API

```
// 网络请求  
$axios // 用于调用自定义的接口  
$http // 用于调用平台的接口  
  
  
// 获取当前登录人信息  
$getUserInfo();  
  
// 打开表单，可以查看具体文档【https://www.yuque.com/s2/xmss/vpd5sw】  
$showFormModal();  
```

### 图标字体

待开放。

## 组件开发

开发方式和vue组件开发方式一致，可以使用vue的所有功能。

### 样式

为了避免组件的样式覆盖平台的样式，所有的组件在使用样式的时候只能用局部样式，禁止使用全局样式，如果需要使用全局样式需要跟项目经理报备。

```
<template>
	<div class="demo">demo</div>
</template>

<style scoped>
  .demo {
    color: #ddd;
  }
</style>
```

## 组件打包

### 通用配置

正常打包组件会把js文件和css文件分开打包成两个组件，而平台不支持js文件和css文件分开上传，需要打包的时候把js和css打包在一起，需要在vue.config.js里添加以下配置：

```

// vue.config.js  
  
module.exports = {  
 css: { extract: false }  
};

```

当组件需要加入一些自定义的图标资源时，必须在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用，这样的图标资源才能和js文件一起被打包，由于vue\-cli的默认设置只会把单个文件小于4kb的图标资源和js文件一起打包，这个时候可以通过在vue.config.js里添加以下配置来改变限制（为了避免打包的文件过大，建议尽量不改变限制使用小图标）。例如，下列代码会将其限制设置为 10kb：

```

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, { limit: 10240 }));
  }
};
```

### V7\.64之前的移动端使用vant组件

由于V7\.64之前的移动端是基于cube\-ui来构建的，外部组件就不能直接使用vant来写界面，如果要使用vant，需要添加以下几步：

#### 按需引入

按需引入有两种方式：

1、自动按需引入

使用[babel\-plugin\-import](https://github.com/ant-design/babel-plugin-import)插件自动引入。

```
# 安装插件
npm i babel-plugin-import -D
```

```
// vue.config.js

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
```

```
// 接着你可以在代码中直接引入 Vant 组件
import { Button } from 'vant';
```

2、手动引入

需要用到哪个组件就引入相应的组件和样式。

```
import Button from 'vant/lib/button';  
import 'vant/lib/button/style';

```

注意：千万不要一次性导入所以组件，这样会造成打包的组件非常大，影响组件加载性能。

```
// 这种方式是不可取的  
import Vant from 'vant';  
import 'vant/lib/index.css';
```

#### 内联vue

由于vant组件内使用了vue的功能，而打包的组件不会打包vue到组件里，这样会导致vant组件加载异常，需要在打包组件的时候把vue一起内联到组件内，需要在打包命令后面加上\-\-inline\-vue 标志：

```
{
  "scripts": {
    "build:HelloWorld": "vue-cli-service build --target lib --name HelloWorld src/components/HelloWorld.vue --inline-vue"
  }
}
```

注意：为了避免打包的文件过大，不要随意添加\-\-inline\-vue 标志。

## 移动端浏览器适配

#### V7\.64之前的浏览器适配

由于V7\.64并为做任何浏览器适配，组件可以不做任何适配

#### V7\.64之后的浏览器适配

目前主流的浏览器适配方案有两种：

第一种方案：amfe\-flexible\+postcss\-pxtorem。

```
# 安装插件
npm i amfe-flexible -D
npm i postcss-pxtorem -D
```

在postcss.config.js里添加配置，rootValue是根据设计稿的基础尺寸来设置的：设计稿如果是750的尺寸，rootValue就是75；设计稿如果是375的尺寸，rootValue就是37\.5，具体其他插件配置

```
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
};
```

第二种方案：postcss\-px\-to\-viewport，V7\.64之后的移动端就是用的这种方案。

```
# 安装插件
npm i postcss-px-to-viewport -D
```

在postcss.config.js里添加配置。

```
module.exports = {
  plugins: {
		'postcss-px-to-viewport': {
      viewportWidth: 750, // 设计稿的宽度
      viewportHeight: 1443, // 设计稿的高度
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      minPixelValue: 1, // 小于等于`1px`不转换为视窗单位
      mediaQuery: false, // 允许在媒体查询中转换`px`
      selectorBlackList: [], // 指定不转换为视窗单位的类
    }
  }
}
```

注意：不要同时使用两种方案，推荐使用第二种方案。