跳到主要内容

自定义 Vue 组件开发规范

使用平台功能​

平台组件​

PC端：element 不需要引入可以直接使用。 移动端：V7.64之前的版本可以直接使用 cube-ui ，V7.64之后的版本可以直接使用 vant 。

平台开发API​

// 网络请求
$axios // 用于调用自定义的接口  
$http // 用于调用平台的接口  
  
  

// 获取当前登录人信息  

$getUserInfo();  
  

// 打开表单
$showFormModal();

图标字体​

待开放。

组件开发​

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

样式​

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

<template>

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

 <script>

  export default {
    name: 'demo'
  }

</script> 

 <!-- 必须添加scoped --> 
 <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 插件自动引入。

# 安装插件
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: [], // 指定不转换为视窗单位的类
    }
  }
}

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