gh-gold

前端公共库 gh-gold

安装项目步骤

## Project setup 安装项目依赖
npm install

### Compiles and hot-reloads for development 启动开发环境，可以编译和热重载
npm run serve

### Compiles and minifies for production 编译生产包
npm run build

### Run your unit tests
npm run test:unit

### Lints and fixes files 语法审查
npm run lint

安装 vant 组件

# 安装vant (本项目已安装)
npm i vant -S
# 安装插件
# 安装后不支持导入所有vant组件，需按需引入。
# npm i babel-plugin-import -D
# babel.config.js 文件中添加
# module.exports = {
#  plugins: [
#    ['import', {
#      libraryName: 'vant',
#      libraryDirectory: 'es',
#      style: true
#    }, 'vant']
#  ]
# };
#注意！
不推荐导入全部vant组件
由于vant  babel-plugin-import自动按需引用有bug
此处推荐使用 手动按需引用

手动按需引入 vant 组件

// 引做公用组件。main.js中,写在 new Vue({...})之前避免报错

import Button from 'vant/lib/button';
import 'vant/lib/button/style';
Vue.use(Button)

// # 所有vue文件中直接使用
// <van-button>按钮</van-button>

vue 文件中单独使用。vue 文件中

<script>
  import  DatetimePicker  from "vant/lib/datetime-picker";
  import 'vant/lib/datetime-picker/style';
  export default {
    components: {
      [DatetimePicker.name]: DatetimePicker
    },
    data() {
      return {};
    }
  };
</script>

Vant 官方文档

引入 less 共用

# 安装less (本项目已安装)

# 执行 style-resources-loader (本项目已安装)
//针对 cli3以上版本
npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
# vue.config.js 中修改配置 (本项目已配置)
   const path = require("path");
   module.exports = {
     ...
     pluginOptions: {
        "style-resources-loader": {
            preProcessor: "less",
            patterns: [
              //注意：试过不能使用别名路径
              path.resolve(__dirname, "./src/assets/variable.less")
             ]
         }
     }
     ...
    }

# 公用less文件
位置： src/assets/less/model.less
所有vue文件均可引用 model.less中的变量以及样式

切换镜像代理

//查看当前镜像代理
 npm config get registry

//切换 淘宝镜像
 npm config set registry http://registry.npm.taobao.org/

//切换 官方源地址
 npm config set registry https://registry.npmjs.org/

发布到 npm

//登录需要切换镜像代理为官方源
 npm config set registry https://registry.npmjs.org/

//npm 登录
 npm login

//发布组件到 npm
 npm publish

文档构建思路

一、新建组件

以组件 ButtonTest 为例

1、./package 文件中， 新建文件夹 button-test 。形成以下结构

package 下添加一个 index.js

为了统一并不与其他组件库重名，组件文件夹名为 gold-xx-xx ,名字使用小写加-

    |--package
       |--button-test
       |  |--src
       |  |  |--css
       |  |  |  |--index.less
       |  |  |  
       |  |  |--button-test.vue
       |  |
       |  |--index.js
       |
       |--index.js

2、1 ./package/button-test/src/button-test.vue 中编写您的组件

<template>
  <div class="button-test">
    {{msg}}
  </div>
</template>
<script>
  export default {
    name: "button-test",
    props: {
      msg: String
    }
  };
</script>
<style scoped lang="less">
@import "./css/index.less";
</style>

2、2 ./package/button-test/src/css/index.less 中编写您组件样式

//引入 公用less变量
@import "../../../../static/less/_primaryParam.less";
.button-test-tt{
    color:@color-primary;
}

3、button-test/index.js 中添加代码

import ButtonTest from "./src/button-test.vue";

//为组件提供 install 安装方法，供按需引入
ButtonTest.install = function(Vue) {
  Vue.component(ButtonTest.name, ButtonTest);
};
// 默认导出组件
export default ButtonTest;

4、package/index.js 中定义所有组件安装

// 导入自定义组件 （此处引入了ButtonTest、GoldCard）
import ButtonTest from "./button-test";
import GoldCard from "./gold-card";
// 存储组件列表
const components = [ButtonTest, GoldCard];
//定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
  // 判断是否可以安装
  if (install.installed) return;
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component));
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  ButtonTest,
  GoldCard
};

二、版本控制

./package.json 文件中，

{
  "name": "gh-gold", //其中的组件 name 推荐和创建的项目名一致
  "version": "0.1.6",//版本号 上传npm 之前必须修改版本号
  "private": false,//设置库为公用 （未解决bug:设为true,npm上传不成功,）
  "keyword": "gh-gold model",//关键词
  "description": "金探号公用组件库 0.1.6",//描述
  "author": "huangheaven",//作者 建议与npm登录名一致
  "main": "lib/index/index.js",//文件主入口
  ...
}

三、打包配置

将新增的 packages 文件夹加入 babel 转码编译

在 vue.config.js 文件中配置内容如下

网上案例： Vue CLI3 搭建组件库并实现按需引入实战操作.

四、编译打包

npm run build,

五、配置文件入口

//./package.json文件中，配置文件主入口
{
    ...
    "main": "lib/index/index.js",
    ...
}

六、发布 npm

# 如果登录失败 请切换镜像代理 官方源地址
 npm config set registry https://registry.npmjs.org/

# 这是登录，前提是你已经在 npm 注册了账号
npm login
# 发布到 npm
npm publish

七、在新项目中引用库 “gh-gold"

1、建议 按需引用

# 安装插件
npm install babel-plugin-component -D

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置 (配置参数有待考察)
module.exports = {
  ...
    plugins: [
      ['component', {
        libraryName: 'gh-gold',
        "styleLibraryName": "style"
      }]
    ]
}

main.js 文件中全局引用

import Vue from "vue";

import { ButtonTest, GoldCard } from "gh-gold";
Vue.use(ButtonTest).use(GoldCard);

Vue.config.productionTip = false;

vue 单文件中使用

import { GoldCard } from "gh-gold";
export default {
  name: "home",
  components: {
    GoldCard
  },
  methods: {}
};