# v3-components-james

**Repository Path**: GolderBrother/v3-components-james

## Basic Information

- **Project Name**: v3-components-james
- **Description**: 使用 vue3 + typescript 开发的组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-25
- **Last Updated**: 2020-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# v3-components-james

## Project setup

``` 
yarn install
```

### Compiles and hot-reloads for development

``` 
yarn serve
```

### Compiles and minifies for production

``` 
yarn build
```

### Lints and fixes files

``` 
yarn lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

### Tips

* `autoprefix` 版本在 `8` 和 `9` 都可以，安装 `10` 版本, `rollup` 和 `webpack` 打包会报错
* `postcss` 版本为 `8`

### 发布

#### 更新版本

执行 `npm version patch` 命令，会自动更新 `package.json` 文件的 `version` ，然后自动提交到git历史

* 登录npm

`npm addUser` or `npm login`
* 发布

发布之前需要先切换到官方 `npm源`
1. 切换源

``` bash
npm config set registry 
```

或者使用 `nrm`
安装nrm

``` bash
npm i nrm -g
```

``` bash
nrm use nrm
```

2. 发布

``` bash
npm publish
```

> 发布严重依赖网络环境，如果实在发布不了，可以将代码放到阿里云服务器来发布

### 按需引入

使用babel插件 `babel-plugin-import`

``` bash
npm i babel-plugin-import 

然后在 `babel.config.js` 文件中配置

``` js
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset',
    ],
    plugins: [
        [
            'import',
            {
                "libraryName": "v3-components-james",
                "customName": (name) => {
                    // 这边会自动传换成小驼峰命名引入
                    return `v3-components-james/src/packages/${name}/index.ts` ;
                }
            }
        ]
    ]
}
```

这个插件的作用是：

将 `import {Input} from 'v3-components-james'` 自动转换成 `import Input from 'v3-components-james/src/packages/input'` 来引入

全局引入样式文件：

``` scss
@import {Input} from '~v3-components-james/src/style/main';
```

> 加上 `~` 表示会去找 `node_modules` 目录下查找文件, 不加就是找当前目录下的

支持主题色自定义配置(全局主题色、局部主题色)，按需加载，用户自定义的组件也可以适配主题