基于Vue-cli3.x编写公用组件并上传到npm仓库

搭建项目

用Vue Cli3.x搭建

进入需要创建项目的目录，按住 shift 右键选择 “在此处打开powershell窗口”或“命令行提示符”

使用vue create命令，比如创建一个名为 vinsea 的项目，输入

vue create vinsea

自定义配置

最终配置如下

css预编译工具选自己喜欢的

eslint要不要都行，个人建议安装，规范代码

项目结构

最终生成好的项目结构如下

可以删除跟 HelloWorld.vue 相关的代码

编写组件

组件可以简单的分为单个组件和多个组件

单组件

在 components 文件夹下新建一个 .vue ，名字随意，但要符合Vue组件规范： https://cn.vuejs.org/v2/style-guide/

比如 BaseInput.Vue ，给原生 input 加一些简单的功能

这时候src目录结构为

src
├── assets
├── components
│   └── BaseInput.Vue
├── App.vue
└── main.js

导出

在 components 下新建一个 index.js，内容为

javascript

// 导入组件
import BaseInputfrom "./BaseInput"; 

// 给组件加install方法，供按需引入
BaseInput.install = Vue => Vue.component(BaseInput.name, BaseInput); 

// 导出组件
export default BaseInput;

这时候，一个单组件就完成了，可以进入下一步本地测试，如果是多个组件，继续往下看

多个组件

// TODO

导出

// TODO

本地测试

单个组件（按需加载）

在 App.vue 中

引入组件

javascript

import BaseInput from "./components/BaseInput";

export default {
  name: "app",
  components: {
    BaseInput
  }
}

模版中使用

html

<template>
  <div id="app">
    <base-input></base-input>
  </div>
</template>

npm run server 启动项目就可以调试

多个组件（全局安装）

// TODO

发布

发布之前，需要配置一下项目

自定义配置

这一步是将 css 以内联的方式与组件绑定，可以按照自己需求来，如果不需要将css以内联形式导出，就可以跳过

在根目录下添加 vue.config.js ，这是Vue Cli3用于覆盖webpack配置的文件，类似cli2的 webpack.base.conf.js

javascript

/**
 * Author:Vinsea.
 * CreateDate:2019/4/19 13:13.
 * Describe: 自定义配置文件
 */
module.exports = {
  css: {
    extract: false
  }
};

修改package.json

1、将 dependencies中的 core-js和 vue放到 devDependencies中，因为要使用组件的项目肯定是vue项目，组件只是开发时需要用到。

2、必须添加的一些属性：

json

"name": "@com.vinxea/base-input",
"description": "base-input",
"version": "0.0.1",
"author": "Vinsea(https://www.vinxea.com)",
"main": "lib/base-input.umd.min.js",
"files": [
  "lib",
  "src"
],

其中 name 必须是@ 开头，@com.vinxea表示“scope”，可以理解为包名，这样不容易和其他包重复，而且如果有多个组件，都可以在这个包下找到

main 是指组件打完包以后的入口，下面会解释

files 是指需要打包后需要保留的目录，可以只写 lib（lib文件夹是我自定义的，下面会解释）

注意，如果公司有自己的代理仓库，需要加一个publishConfig属性，registry 值为公司代理仓库的地址，比如

json

"publishConfig": {
  "registry": "http://npm-registry.xxxxxxx.com/repository/npm-releases/"
}

3、新增一条打包命令

json

"scripts": {
  "lib": "vue-cli-service build --target lib --name base-input --dest lib src/components/index.js"
},

这是 Vue cli3.x的构建库命令，具体可以看官网： https://cli.vuejs.org/zh/guide/build-targets.html

它主要需要四个参数：

target: 默认为构建应用，改为 lib 即可启用构建库模式
name: 输出文件名
dest: 输出目录，默认为 dist，这里我们改为 lib
entry: 入口文件路径，默认为 src/App.vue，这里改为 src/components/index.js

执行 npm run lib 后，根目录下会生成一个 lib 文件夹

注册/登录npm

注册

可以通过 npm adduser 命令创建一个账户，或者到 npm 官网注册：https://www.npmjs.com/

发布

npm publish

网不好的话会有点慢，最后一行输出以下内容表示发布成功

+ @com.vinxea/base-input@0.0.1

最后测试

官网查看

去 https://www.npmjs.com/ 的搜索框搜索组件名，可以看到组件相关信息

安装测试

在当前项目下，安装已经上传的组件

npm install --save @com.vinxea/base-input

按照刚才“本地测试”的步骤，再测一遍

总结

如果是单组件的话，其实可以不用打包，直接上传，package.json的入口指向这个vue文件。

开发组件还需要注意引用第三方组件时，能按需就按需，防止项目过大。

可以多看优秀的ui库的源码，学习大佬们的思路。

参考： http://www.cnblogs.com/wisewrong/archive/2018/12/28/10186611.html http://www.rxshc.com/180.html

基于Vue-cli3.x编写公用组件并上传到npm仓库

搭建项目 ​

用Vue Cli3.x搭建 ​

自定义配置 ​

项目结构 ​

编写组件 ​

单组件 ​

导出 ​

多个组件 ​

导出 ​

本地测试 ​

单个组件（按需加载） ​

引入组件 ​

模版中使用 ​

多个组件（全局安装） ​

发布 ​

自定义配置 ​

修改package.json ​

注册/登录npm ​

注册 ​

登录 ​

发布 ​

最后测试 ​

官网查看 ​

安装测试 ​

总结 ​

搭建项目

用Vue Cli3.x搭建

自定义配置

项目结构

编写组件

单组件

导出

多个组件

导出

本地测试

单个组件（按需加载）

引入组件

模版中使用

多个组件（全局安装）

发布

自定义配置

修改package.json

注册/登录npm

注册

登录

发布

最后测试

官网查看

安装测试

总结