vue-cli3.0发布plugin

操作

生成项目 vue create

首先需要创建一个 packages 目录，用来存放组件
然后将 src 目录改为 examples 用作示例

创建vue.config.js

module.exports = {
    css: {
        extract: true
    }
}

组件

packages
- 组件名
  - main.vue
  - index.js

打包组件

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

"script": {
    "lib": "vue-cli-service build --target lib --name jeft-vue-confirm --dest lib packages/confirm/index.js"
}

配置package.json与.gitignore

name: 包名，该名不能和已有的名称冲突； version: 版本号，不能和历史版本号相同； description: 简介； main: 入口文件，应指向编译后的包文件； keyword：关键字，以空格分割； author：作者； private：是否私有，需要修改为 false 才能发布到 npm； license：开源协议。

package

"name": "jeft-vue-confirm",
"version": "0.1.6",
"description": "vue-confirm-plugin",
"main": "lib/jeft-vue-confirm.umd.min.js",
"keywords": ["vue", "vue-confirm", "jeft-vue", "jeft-vue-confirm"],
"author": "jeft-hai",
"private": false,
"license": "MIT",

.gitignore

.DS_Store
node_modules
examples
packages
public
vue.config.js
bable.config.js
*.map
*.html
.history

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

发布到 npm

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

npm login
npm publish

遇到的问题

css要手动引入不自动引入

配置vue.config.js

module.exports = {
    css: {
        extract: true
    }
}

打包之后的包相对plugin原文件很大

删除babel配置

发布npm