vue 怎么把自己的组件打包和下载使用

136 阅读 0 评论 90 点赞

我是靠谱客的博主俭朴吐司，这篇文章主要介绍vue 怎么把自己的组件打包和下载使用，现在分享给大家，希望可以做个参考。

1、首先新建一个组件，下面以封装的基础input为例子：
BaseInput.vue组件
代码如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<el-input 
          v-model="value"
          :size="size"
          :type="type"
          :rows="rows"
          :placeholder="placeholder"
          :disabled="disabled"
          :readonly="readonly"
          :maxlength="length" >
</el-input>
<script>
	export default {
		name: 'BaseInput'  //每个组件需要写明“name”属性
		props:{
			size: String, // 输入框大小设置
			rows: null,
			type: String,
            placeholder: String,
            disabled: Boolean,
            readonly: Boolean,
            length: [Number, String],
		}
	}
</script>

注意：组件内部一定要写明“name”属性
2、在组件同级目录下新建一个index.js文件
目录结构如下：
在这里插入图片描述
index.js代码如下：
组件的注册，目的是为组件提供 install 安装方法，供按需引入。

复制代码

1
2
3
4
5
6
7
8
9
10
11
// 导入组件，组件必须声明 name
import BaseInput from './baseInput.vue'

// 为组件提供 install 安装方法，供按需引入
BaseInput.install = function (Vue) {
    Vue.component(BaseInput.name, BaseInput)
}

// 默认导出组件
export default BaseInput

3、导出组件
整合所有的组件，对外导出，即一个完整的组件库
在components文件在新建一个index.js文件：
目录结构如下：
在这里插入图片描述
index.js代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 导入下拉按钮组件
import BaseInput from './baseInput/BaseInput.vue'

// 存储组件列表
const components = [
   BaseInput 
]

// 定义 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,
    // 以下是具体的组件列表
    BaseInput 
}

4、配置项目
vue.config.js 配置文件，如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。
目录结构：
在这里插入图片描述
vue.config.js代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
    pages: {
        index: {
            entry: 'src/components/index.js', // 入口文件
            template: 'public/index.html', // 模板来源
            filename: 'index.html' //输出文件
        }
    },
    css: { extract: false },
}

5、编译命令
根目录下 package.json 中新增一条编译为库的命令 --target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。 --dest : 输出目录，默认 dist。这里我们改成 lib [entry]: 最后一个参数为入口文件，默认为 src/admin/manage/App.vue。这里我们指定编译 src/components/index.js
目录结构：
在这里插入图片描述
package.json代码如下：新增一条

复制代码

1
2
3
4
"scripts": {
      "lib": "vue-cli-service build --target lib --name baseInput --dest lib src/components/index.js",
}

6、执行编译库命令

复制代码

1
2
npm run lib

7、配置发布包的字段
打包完之后，修改package.json文件
在这里插入图片描述
根目录下 package.json中配置
description: 描述
keyword：关键字，以空格分离希望用户最终搜索的词
author：作者
license：开源协议
代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "name": "BaseInput",//上传到npm私服中的包名，也是发布要引用import的名字
  "version": "0.1.0",//版本号，每次npm publish发布时，需要修改不同的版本号
  "private": false,//是否私有，设置为false才可以发布到npm
 "main": "lib/BaseInput.umd.min.js",//入口文件，该字段需要指向最终编译后的包文件
 "scripts": {
   "lib": "vue-cli-service build --target lib --name BaseInput--dest lib src/components/index.js",
   "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "beta": "vue-cli-service build --mode beta",
 "lint": "vue-cli-service lint",
 "analyze": "ANALYZE=true vue-cli-service build",
 "test:e2e": "vue-cli-service test:e2e",
 "test:unit": "vue-cli-service test:unit"
}
 }

8、设置忽略发布文件
减小包的体积。
发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。
需要设置忽略目录和文件。
和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。

9、在本地测试并使用

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>rollup.js + vue</title>
</head>

<body>
  <div id="app">
    <base-input
      placeholder="请输入"
      type="text"
      v-model="valueOne">
    </base-input>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="./lib/BaseInput.umd.js"></script>
  <script>
    Vue.use(hero)
    Vue.use(BaseInput)
    var app = new Vue({
      el: '#app',
      data(){
        return {
          valueOne:'你好'
        }
      }
    })

  </script>
</body>
</html>

10、发布包
把打包好的lib文件发布到自己的私服或者git上

11、下载并使用
npm install BaseInput
在 main.js 引入并注册
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;//使用element组件需要引入对应的样式文件
import BaseInput from ‘BaseInput’
Vue.use(ElementUI)
Vue.use(BaseInput)