# mqli-ui

> 基于 vue3.0 的前端组件库

Latest version **1.0.2** (published 2020-07-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install mqli-ui
pnpm add mqli-ui
yarn add mqli-ui
bun add mqli-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-07-30 |
| First published | 2020-07-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 97.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | mqli |

## Links

- npm: https://www.npmjs.com/package/mqli-ui
- Repository: https://github.com/mqli2/m-ui
- Homepage: https://github.com/mqli2/m-ui#readme
- Issues: https://github.com/mqli2/m-ui/issues
- npm.io page: https://npm.io/package/mqli-ui

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.7

## Recent versions

- 1.0.2 (latest) — 2020-07-30
- 1.0.1 — 2020-07-30
- 1.0.0 — 2020-07-30

## README

# 目录结构

> |-- examples // 原 src 目录，改成 examples 用作示例展示
>
> |-- packages // 存放组件

## 配置支持 packages 目录

> 系统报错：找不到 src/main.js
>
> 原因：新增的 packages 目录，未加入 webpack 编译

**vue.config.js**

```javascript
module.exports = {
    // 修改 src 目录为 examples 目录
    pages: {
        entry: 'examples/main.js',
    }
}
```

# 发布到 npm

## package.json 构建目标：库

```json
// --target,构建目标，默认为应用模式，这里修改为 lib 启用库模式
// --dest，输出目录，默认为 dist，这里修改为 lib
// [entry]，最后一个参数为入口文件，默认为src/App/vue，这里指定编译 packages/ 组件库目录
“lib”: “vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js”
```

## 配置package.json 发布 npm 的字段信息

```json
// name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
// version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
// description: 描述。
// main: 入口文件，该字段需指向我们最终编译后的包文件。
// keyword：关键字，以空格分离希望用户最终搜索的词。
// author：作者
// private：是否私有，需要修改为 false 才能发布到 npm
// license： 开源协议

{
“name”: “vcolorpicker”,
“version”: “0.1.5”,
“description”: “基于 Vue 的颜色选择器”,
“main”: “lib/vcolorpicker.umd.min.js”,
“keyword”: “vcolorpicker colorpicker color-picker”,
“private”: false
}
```

## 忽略 .npmignore 文件，设置忽略发布文件

> 我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。
>
> 和 .gitignore 的语法一样

```json
// 忽略目录
examples/
packages/
public/

// 忽略指定文件
vue.config.js
babel.config.js
*.map
```

## 登录 npm

> 1. 注册账号，若配置了淘宝镜像，先设置回 npm 镜像，之后在终端执行登录命令(npm login)，输入用户名，密码，邮箱即可登录

## 发布

```cmd
npm publish
# 当你的包名为@your-name/your-package时才会出现 npm ERR! You must sign up for private packages
# 原因是当包名以@your-name开头时，npm publish会默认发布为私有包，但是 npm 的私有包需要付费，所以需要添加如下参数进行发布
npm publish --access public
```

## 撤销发布

```cmd
npm unpublish xxx --force
```

## 使用

```cmd
npm install xxx -S

// main.js
import xxx from ''
vue.use(xxx)
```

# 笔记

## app.vue

> 在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示（即 <div id="app"></div>中内容会显示），随后会被组件的模板内容所取代（即main.js 中的 APP组件），而 index.html 中的 title 部分不会被取代，会一直保留

## 入口文件

> 默认加载 src/main.js，可通过修配置 webpack.config.js 手动指定

```json
module.exports = {
    ...,
  pages:{
    index: {
      // 应用入口配置，相当于单页面应用的main.js，必需项
      entry: 'src/Index_config/main.js',
  
      // 应用的模版，相当于单页面应用的public/index.html，可选项，省略时默认与模块名一致
      template: 'public/index.html',
  
      // 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致
      filename: 'index.html',
  
      // 标题，可选项，一般情况不使用，通常是在路由切换时设置title
      // 需要注意的是使用title属性template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      // title: 'console page',
  
      // // 包含的模块，可选项
      // chunks: ['console']
    },
    test: {
      // page 的入口
      entry: 'src/Test_config/main.js',
  
      // 应用的模版，相当于单页面应用的public/index.html，可选项，省略时默认与模块名一致
      template: 'public/test.html',
  
      // 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致
      filename: 'test.html',
    },
}
```

---
_Source: https://npm.io/package/mqli-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._