阅读 3718

Vue CLI3搭建组件库并用npm发布实战操作

在公司项目逐渐多起来的情况下,公共组件也多起来。不想每一次修改一下公共组件,都要去每个项目中修改。这时候你就该学会用Vue CLI3 搭建组件库并用npm发布了,本文以基于element组件中Select 选择器和Tree 树形控件扩展出来的树结构数据下拉选择器的组件为例子讲解。

一、安装Vue CLI3

  • 首先你要卸载Vue CLI2,用命令npm uninstall vue-cli -g卸载;
  • 输入命令npm install -g @vue/cli安装Vue CLI3;
  • 安装完成后,输入命令vue --version,查看Vue CLI的版本号是否是3.0以上,是代表安装成功。

二、搭建Vue组件库项目

  • 新建文件夹,注意文件名字最好不要用中文,按下图操作;

  • 输入命令vue create fxft-tree-select,fxft-tree-select为项目名称;
  • 按上下键选择Manually select features(手动选择功能)项,default (babel, eslint)(默认安装);

  • 按上下键和回车键选择要安装的功能;

  • 使用路由器的历史模式,回车进入下一步;

  • 选择CSS预处理语言,选择less,回车进入下一步;

  • 选择In dedicated config files,将Babel、PostCSS等配置独立在package.json文件外;

  • 是否保存安装配置,直接回车进入下一步;

  • 如果出现下图就是开始进行下载Vue项目了;

  • 如果下载很慢,是网络问题,可以让电脑连你的手机网络;

三、清洁Vue组件库项目

通过Vue CLI搭建的Vue组件库项目中有很多无用的文件和代码,需要对其做一次清洁。

1、初始化

  1. 下载完成后,首先打开package.json文件,将
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
    },
    复制代码
    改成
    "scripts": {
        "dev": "vue-cli-service serve",
        "build": "vue-cli-service build"
    },
    复制代码
    因为在Vue CLI2中使用npm run dev命令启动项目。
  2. 使用npm install安装依赖,安装成功后,执行npm run dev,执行成功后在浏览器打开 http://localhost:8080/ ,页面展示如下图所示,说明Vue项目已经搭建成功。

2、清洁public文件下的index.html文件

清洁后如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head>
<body>
    <div id="app"></div>
</body>
</html>
复制代码

3、清洁router.js文件

清洁后如下:

import Vue from 'vue'
import Router from 'vue-router';
Vue.use(Router)

function load(component) {
    return resolve => require([`./views/${component}`], resolve);
}

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            component: load('home')
        },
    ]
})

复制代码

4、清洁App.vue文件

清洁后如下:

<template>
  <div>
    <router-view/>
  </div>
</template>
复制代码

5、清洁views文件夹

删除views文件夹中的About.vue和Home.vue文件,

新建home.vue文件.内容如下:

<template>
    <div style="text-align:center">
        <img alt="Vue logo" src="../assets/logo.png">
        <p>欢迎使用Vue组件库项目</p>
    </div>
</template>
复制代码

6、删除components文件夹

7、清洁完毕

重新执行npm run dev,执行成功后在浏览器打开 http://localhost:8080/ ,页面展示如下图所示,说明Vue项目已经清洁成功。

四、配置Vue组件库项目

清洁完毕后,但其还是不满足我们组件库项目开发的要求,需要我们进一步配置。

1、更改src文件夹的名字

在Vue组件库项目中原来src文件夹的内容是demo展示的内容,所以文件名改成examples,比较形象。

2、重新配置项目入口文件

在Vue CLI3中,项目的webpack配置是要在根目录下新建vue.config.js来配置。

在vue.config.js文件中配置内容如下:

module.exports = {
    pages: {
        index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html',
        },
    },
}
复制代码

3、在根目录下新建packages文件夹

组件的代码在package文件夹中开发

4、配置文件别名

const path = require('path');
function resolve(dir) {
    return path.resolve(__dirname, dir)
}
module.exports = {
    configureWebpack: {
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                '@': resolve('packages'),
                'assets': resolve('examples/assets'),
                'views': resolve('examples/views'),
            }
        }, 
    },
}
复制代码

5、关闭source map

关闭source map有两个好处

  1. 减少打包编译的时间;
  2. 避免在生产环境中用F12开发者工具在Sources中看到源码。

在vue.config.js文件中配置内容如下:

module.exports = {
    productionSourceMap: false,
}
复制代码

6、配置css.extract项

是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码),

当作为一个库构建时,要将其设置为 false 免得用户自己导入 CSS。

在vue.config.js文件中配置内容如下:

module.exports = {
    css: {
        extract: false,
    },
}
复制代码

7、暴露默认导出配置

在vue.config.js文件中配置内容如下:

module.exports = {
    configureWebpack: {
        output: {
            libraryExport: 'default'
        }
    },
}
复制代码

8、配置devServer项

  1. 固定端口

    port: 8091,

  2. 开启热更新

    hot: true,

  3. 固定打开浏览器

    open: 'Google Chrome',

在vue.config.js文件中配置内容如下:

module.exports = {
    devServer:{
        port: 8091,
        hot: true,
        open: 'Google Chrome'
    }
}
复制代码

五、组件开发环境配置

1、组件入口文件

我们使用插件时候,一般会做两个步骤

import treeSelect from 'fxft-tree-select';
Vue.use(treeSelect);
复制代码

那你可知为什么要这么使用。

  • Vue.use()

    安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。

    该方法需要在调用 new Vue() 之前被调用。

    在今天写的树下拉选择器组件是一个对象,所以要提供install的方法,并暴露出来。

  • install方法

    官网这么介绍:这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。

那么我在packages文件夹中新建index.js文件中写入:

import treeSelect from './src/index.vue';
treeSelect.install = function(Vue) {
    Vue.component(treeSelect.name, treeSelect);
};
export default treeSelect;
复制代码

2、搭建组件调试环境

  • 在packages文件夹新建src文件夹,在src文件夹中新建index.vue文件和js文件夹,js文件夹下新建index.js文件。
  • 在 index.vue文件写入:
    <template>
        <el-select v-model="value">
            <el-option value="1">1</el-option>
            <el-option value="2">2</el-option>
        </el-select>
    </template>
    <script src="./js/index.js"></script>
    复制代码
  • 在index.js文件写入:
    export default {
        name: 'treeSelect',
        data(){
            return {
                value:'',
            }
        }
    }
    复制代码
  • 执行命令npm install element-ui --save
  • 在examples文件夹中main.js文件中写入:
    import 'element-ui/lib/theme-chalk/index.css';
    import { Select, Option, Tree } from 'element-ui';
    import treeSelect from '@/index';
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Tree);
    Vue.use(treeSelect);
    复制代码
  • 在examples/views文件夹中home.vue文件中写入:
    <template>
        <div style="text-align:center">
            <img alt="Vue logo" src="../assets/logo.png">
            <div>
                <tree-select></tree-select>
            </div>
        </div>
    </template>
    复制代码
  • 浏览器页面显示如下图片。则说明组件调试环境搭建成功

大家注意到

import treeSelect from '@/index';
Vue.use(treeSelect);
复制代码

在home.vue中<tree-select></tree-select>这样使用。

我们换成这样引入,也可以正常显示

import myTree from '@/index';
Vue.use(myTree);
复制代码

但是如果我们换成<my-tree></my-tree>这样使用,则会报组件未定义的错误。

为什么呢。因为<tree-select></tree-select>这样使用,是根据packages/src/js/index.js文件中的name:'treeSelect',而不是根据Vue.use(treeSelect),所以我们在写组件文档时候,组件标签一定要在文档中体现处理

组件调试环境搭建完了,开发过程就不详细介绍了。最后会把git仓库地址公布出来,下面介绍一下怎么用npm发布。

如果大家需要详细的开发过程介绍,可以给我留言,看情况写详细开发流程。

六、npm发布前准备工作

1、打包编译命令

在package.json文件中写入:

"scripts": {
    "dev": "vue-cli-service serve",
    "lib": "vue-cli-service build --target lib --name tree-select --dest lib packages/index.js"
},
复制代码
  • --target: 构建目标,默认为应用模式。这里修改为 lib 启用库模式;
  • --name: 打包后的文件名;
  • --dest:输出目录,默认 dist。这里我们改成 lib;
  • [entry]:入口文件,默认为 src/App.vue。这里我们指定编译 packages/index.js

执行命令npm run lib后,会发现项目中多了一个文件夹。

  • lib/tree-select.common.js:一个给打包器用的 CommonJS 包 (不幸的是,webpack 目前还并没有支持 ES modules 输出格式的包)

  • lib/tree-select.umd.js:一个直接给浏览器或 AMD loader 使用的 UMD 包

  • lib/tree-select.umd.min.js:压缩后的 UMD 构建版本

2、配置主入口文件

在package.json文件中写入:

"main": "lib/tree-select.umd.min.js",
复制代码

3、设置库为公开库

在package.json文件中写入:

"private": false,
复制代码

4、配置关键词、描述、作者

在package.json文件中写入:

"keyword": "tree-select tree select",
"description": "基于element组件中Select 选择器和Tree 树形控件扩展出来的树结构数据下拉选择器",
"author": "pengyh",
复制代码

5、检查组件库名是否已被使用

将package.json文件中"name": "fxft-tree-select"的fxft-tree-select复制到npm官网上查重。

如果name值有重复需要修改,否则发布不上去,会提示你是否有权限修改此库。

6、检查组件版本是否重复

对照package.json文件中"version": "0.5.0",,0.5.0是否重复版本,如果重复,需要手动更新版本,否则会提示不能在以前发布的版本上发布

7、设置忽略文件,减少依赖包大小

项目中只有编译后的 lib 目录、package.json、README.md才是需要被发布的。我们需要在.gitignore文件中设置:

examples/
packages/
public/
vue.config.js
babel.config.js
复制代码

8、编辑使用文档

在README.md,要写清楚,怎么安装,怎么引入使用,有哪些参数,哪些方法,哪些事件等,这是非常关键的

七、npm发布

1、登录到npm

首先需要到 npm 上注册一个账号,注册过程略。

如果配置了淘宝镜像,先设置回npm镜像: 执行命令npm config set registry http://registry.npmjs.org

执行命令npm login按步骤输入用户名、密码、邮箱,每个步骤回车进入下一步

2、发布到npm

执行命令 npm publish,如果成功如下图

3、怎么更新同步到cnpm

打开淘宝 NPM 镜像,将组件名fxft-tree-select输入进行搜索 点击下图所示进行同步

八、使用组件

  • 安装,执行命令npm install fxft-tree-select --save
  • 安装成功后,在项目中的src文件夹中main.js写入:
    import treeSelect from '@/index';
    Vue.use(treeSelect);
    复制代码

在项目这样<tree-select></tree-select>这样使用。

九、后记

以上只是讲解了,单个组件的组件库怎么开发。后续还有多个组件的组件库怎么开发,怎么按需引入及怎么搭建私有的npm库。

项目地址:fxft-tree-select