百度查了一圈全是用废弃的vue-cli 2中的vue init webpack-simple xxx 新建最简模板,还要装个全局桥接工具才能运行,然后该一堆配置实现。
直觉@vue/cli 3中应该有一定的办法,在文档里翻了半天发现只要build时加参数就行。。
官网文档链接

新建vue项目
vue create login_all

1.打包为库
通过命令:

npm run build --target lib --name myLib [entry]
或者
yarn build --target lib --name myLib [entry]

[entry]为入口路径 如src/components/HelloWorld.vue
build之后温馨的连使用示例都给了
库模式

2.打包为web组件(成果为单js,通过script标签引入,直接置入,之前需引入vue)
通过命令:

npm run build --target wc --name  my-element [entry]
或者
yarn build --target wc --name  my-element [entry]

这里命名必须带着连字符’-’
build后

如何发布到npm
1.修改一下package.json。加入

"description": "description",
 "main": "dist/myLib.common.js",
   "files": [
    "dist/myLib.umd.js", "dist/demo.html", "dist/myLib.css"
  ],
 "repository": {
    "type": "git",
    "url": "https://github.com/authorname/reponame.git"
  },
  "bugs": {
    "url": "https://github.com/authorname/reponame/issues"
  },
  "homepage": "https://github.com/authorname/reponame#readme",
  "author": "authorname",
  "license": "MIT",

去掉 "privite":true,
还可以自动在发布前重新build,更改scripts命令新增一行prepare:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "prepare": "vue-cli-service build --target lib --name myLib src/components/HelloWorld.vue"
  },

这样在运行npm publish的时候会先执行prepare,重新编译打包
files[]中覆盖了要导出的其他文件。这3个包含了标签形式导入的js和示例及css。css 可以通过在 vue.config.js 中设置 css: { extract: false } 强制内联,那就无需导出。

最后编辑readme.md。

2.去官网https://www.npmjs.com/注册和邮件激活
3.命令行执行(如果未更改源为国内https://registry.npm.taobao.org/,第一行可以跳过)

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

撤销发布包命令(发布24小时之内)
npm unpublish --force

Logo

前往低代码交流专区

更多推荐