vue-cli 发布一个npm 包

此项目中我们将element-ui 自定义主题，并且覆盖更改了一些样式

作用：

1.避免在每个项目中重新生成主题文件

2.避免每个项目不一致性

3.增加可维护性

开始

 在src目录下建了一个index.js文件用于导出重新的less文件和element-ui编译出的font和css文件

这里要注意先后顺序，相同样式的情况下后面的会覆盖前面的

index为编译出的主题样式文件

segma-ui为在编译的基础上再覆盖的样式文件（主题编译更改有限，比如hover active的效果不好更改）

 

package.js 中新增一条编译为库的命令，vuecli3提供了一个构建目标库的命令，

可以查看官方文档详细了解：https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93

vue-cli-service build --target lib --name myLib [entry]

• --target : 构建目标，默认为应用模式。这里修改为 lib 启用库模式。
• --dest : 输出目录，默认 dist 。这里我们改成 lib
• [entry] : 最后一个参数为入口文件，默认为 src/App.vue 。这里我们指定编译 packages/ 组件库目录。

这里我添加的是 src/index.js   我在index.js中导出了我需要的组件或者文件

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

并在package.json中添加npm包的一些详细信息,仅供参考： 

{
    "name": "segma-ui",
    "version": "0.1.1",
    "private": false,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lib": "vue-cli-service build --target lib --name segma-ui --dest lib src/index.js",
    },
 
    "description": "```\r npm install\r ```",
    "main": "dist/index.html",
    "repository": {
        "type": "git",
        "url": "git+https://github.com/Embrace924/segma-ui.git"
    },
    "keywords": [
        "node",
        "element-ui",
        "vue",
        "javascript",
        "scss",
        "less"
    ],
    "author": "cld",
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/Embrace924/segma-ui/issues"
    },
    "homepage": "https://github.com/Embrace924/segma-ui#readme"
}

执行编译

npm run lib

项目的根目录也多了一个lib文件夹

注册npm账号

如果之前修改过npm源为淘宝镜像，先改回为npm镜像

npm config set registry http://registry.npmjs.org

使用npm账号登录（在浏览器注册时使用的邮箱，点击注册链接完成邮箱认证）

npm login

 执行发布命令，发布组件到 npm

npm publish

发布成功

发布成功后稍等几分钟，即可在 npm 官网搜索到。以下是刚提交的 segma-ui

 

 

在需要的项目中安装依赖  对应需要的版本

在项目中引用文件、使用组件