Vue封装组件库-把packages处理成vue插件

目录

把packages处理成vue插件

基本配置

1、目录调整

2、vue.config.js配置

3、install方法

4、打包组件库

组件库上传GitHub

1、处理README.md文件

2、在package.json文件中声明项目作者信息

3、上传GitHub

4、添加远程仓库

组件库上传npm

1、配置package.json

2、配置.npmignore文件

3、注册npm

4、上传到npm

5、将组件库下载到本地

6、使用vue-green-ui

---

把packages处理成vue插件

基本配置

1、目录调整

重新创建一个vue项目，使用了开始已经创建保存过的预设green-ui

在根目录下创建两个文件夹packages和examples

• packages：用于存放所有的组件
• examples：用于进行测试

把将之前写好的组件以及字体图标copy放入到packages中，把fonts放到packages中，将App.vue和main.js放到examples路径下。组件库一般是不需要examples文件夹的，是为了以后设计新的组件时便于测试。同时将原来的src目录删除掉。

2、vue.config.js配置

在项目的根目录下创建vue.config.js文件，并通过entry属性配置入口文件，即examples目录下的main.js文件。

vue.config.js内容如下：

const path = require('path')
module.exports = {
  pages:{
    index:{
      // 修改项目入口文件
      entry:'examples/main.js',
      template:'public/index.html',
      filename:'index.html'
    }
  },
  // 扩展webpack配置,使webpages加入编译
  chainWebpack: config => {
    config.module
    .rule('js')
    .include.add(path.resolve(__dirname,'packages')).end()
    .use('babel')
    .loader('babel-loader')
    .tap(options => {
      return options
    })
  }
}

3、install方法

是把组件当作插件处理，所以安装vue.js插件，如果插件使一个对象，那么必须提供install方法。

在packages目录下，新建一个index.js文件，用于声明install对象。

步骤如下：

1. 我们将所有的组件和字体图标引入到index.js文件中
2. 声明conpoments数组，将组件全部放到这个数组中
3. 定义install方法，在Vue中注册所有的组件
4. 判断是否直接引入了文件，如果引入了，则不需要调用Vue.use()方法
5. 导出install对象

// 整个包的入口
/**
 * 1.将所有的组件和字体图标引入到index.js文件中
 */
import Button from './button'
import Dialog from './dialog'
import Input from './input'
import Switch from './switch'
import Tag from './tag.vue'
import './fonts/iconfont.css'
 
/**
 * 2.声明conpoments数组，将组件全部放到这个数组中
 */
const components = [
  Button,
  Dialog,
  Input,
  Switch,
  Tag
]

/**
 * 3.定义install方法，在Vue中注册所有的组件
 */
const install = function (Vue) {
  // 注册所有的组件
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

/**
 * 4.判断是否直接引入了文件，如果引入了，则不需要调用Vue.use()方法
 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

/**
 * 5.导出install对象
 */
export default {
  install
}

如果以后有新的组件加入，直接导入然后添加到组件数组即可。

4、打包组件库

可以使用vue-cli打包组件库，在官方文档中可以找到相应的打包命令：

vue-cli-service build --target lib

在package.json中的script标签下添加该条指令，并且命名为lib，需要注意的是，我们需要在打包指令后面加上需要打包的路径，这里我们指定为 packages/index.js 。

接着在终端中，跳转该项目目录下，执行npm run lib命令对packages/index.js指定的组件进行打包。

如果没有报错则会打包成功，如果报错的话就根据提示解决错误再运行上述命令

打包成功会在根目录下生成一个dist文件夹，里面的内容如下：

在dist路径下我们看到有多个js文件，这是因为打包生成了多种js规范的文件。

组件库上传GitHub

1、处理README.md文件

README.md对该项目的使用作简单说明

2、在package.json文件中声明项目作者信息

3、上传GitHub

必须先要有一个GitHub账号，这部分不做多述。

新建一个green-ui仓库

创建仓库成功

然后在green-ui目录下右键单击出现git面板

第一步：使用git status查看文件状态

第二步：使用git add . 命令添加路径下文件

第三步：使用git commit -m '提交组件' 命令上传

4、添加远程仓库

git remote add origin https://github.com/你的用户名/green-ui.git
git push -u origin master

第一次提交需要输入密码

然后在GitHub上查看，就知道已经上传成功了

组件库上传npm

1、配置package.json

• 如果想把包发布到npm上，package.json中的private必须为fasle，我们需要将其设置位公有的包："private": false,
• 并且name必须为npm上没有的包，否则不能上传（可以先去npm官网搜索name属性指定的包名是否有重复，如果重复了请修改包名，否则上传的时候会报错，而本例中green-ui是重复了，后面修改成了vue-green-ui，但green-ui.css等文件的名字却没有改变，所以要注意导入名字的变化）
• 同时我们可以指定入口文件  "main": "dist/green-ui.umd.min.js"

2、配置.npmignore文件

在根目录下创建一个.npmignore文件。

这个文件的作用和.gitignore文件作用类似，都是将一些不需要上传的文件路径进行忽略。

由于是提供的组件库，已经把项目打包好了，只需要上传打包文件，不需要上传源码，故配置如下：

# 忽略目录
examples/
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
*.map

3、注册npm

如果要上传项目到npm，需要npm账户，但目前我还没有，所以需要进行注册。

进入NPM官网，通过验证，然后进行注册

创建账户成功

4、上传到npm

使用npm login命令登录npm账户

接着使用npm publish命令上传

（注意：由于name属性指定的报名在npm已经存在，所以修改了package.json中的name属性值，因此下面的名字已经由green-ui变为了vue-green-ui了。）

上传成功，在npmjs官网搜索name属性指定的包名就可以找到上传成果了

5、将组件库下载到本地

打开终端，跳转到某个vue项目目录下，然后运行npm add vue-green-ui命令，添加vue-green-ui到模块中

然后在node_modules目录下可以看到下载成功的vue-green-ui了

6、使用vue-green-ui

首先在main.js文件中导入vue-green-ui及相关样式。

import GreenUI from 'vue-green-ui'
import 'vue-green-ui/dist/green-ui.css'

Vue.use(GreenUI)

然后在App.vue中使用该组件

运行vue项目，查看使用效果

到此为止，组件的封装就告一段落了。