创建index.js
创建index.js作为你所有组件的出口文件,具体就是将组件导入再导出
例如有一个Button组件需要导出
import Button from './src/Button.vue'
export {Button}
上面代码还可以简写为
export {default as Button} from './src/Button.vue'
由于nodejs不支持import我们还需要使用打包工具将index.js打包一下，当然你也可以直接使用nodejs的require语法。
使用parcel打包
安装parcel
yarn global add parcel-bundler
或
npm install parcel-bundler -g
使用parcel单独为index.js进行打包
parcel build index.js --no-minify --no-cache
--no-minify不对代码进行压缩。因为压缩后vue的<solt/>会被直接吃掉。
--no-cahce清除缓存
配置package.json
需要对以下几个属性进行修改
- name 发布到npm之后对应的包名称
- version 目前发布包的版本号
- main 入口文件的路径
- files 包文件
- description 描述
package.json示例
{
"name": "xxx-ui",
"version": "0.0.1",
"main": "dist/index.js",
"files": ["dist/*"],
"description": "vue UI框架",
}
注册npm账号
进入npmjs官网注册账号，已经注册过的可以跳过。小本本己住用户名和密码以后要考的
登入npm账号
需要在命令行中登入npm账号
登入
npm login
将你之前小本本记下来的账号输入即可
也可注销
npm logout
切换npm源
在发布之前需要将切换一下npm源。因为你是要将包发布到npm而不是淘宝源或其他。
快速切换源
这里推荐一个工具方便你们快速切换源
全局安装
yarn global add nrm
或
npm install nrm -g
查看
nrm ls
你可以看到目前使用的源地址，以及可选的地址列表
切换源
nrm use npm
发布
一切准备就绪，使用以下命令发布即可
npm publish
注意每一次发布版本都需要更改package.json中的版本号，每次发布的版本号不能重复.一般在自己下载测试可用之后再发布一个
"version": "0.1.0"的可用版本
