使用vue-cli编写组件并发布到npm上

Author Avatar
yizhiyan 1月 22, 2019

前几天遇到一个问题,需要写一个tree组件,研究了半天发现网上的基本上都有问题,这里我就分享给大家一个完整的教程吧

1.创建一个vue-cli项目,如果你还不会创建可以看一下我之前的教程。

vue init webpack-simple yizhiyan-ui-button

2.根据vue-cli提示进行初始化操作

 cd yizhiyan-ui-button npm install npm run dev

先来看看整体目录吧

我在src目录下新建了个button目录然后在下面新建index.vue文件

我们修改index的name为zyButton,然后在indec.vue同级目录下新建index.js文件

编写index.js如下

import zyButton from './index.vue';//设置模块导出名字zyButton.install = Vue => Vue.component(zyButton.name, zyButton);//导出模块,如果这里是单个模块就直接导出单个名字// 如果是同时导出多个则使用{}如:{zyButton,zuTree}export default zyButton

我们在app.vue中引入我们的index.js测试一下

运行之后发现报错找不到模块index.vue仔细一看原来是我们的文件名写错了

改过来之后在运行

npm run dev

测试成功现在咱们就开始修改配置文件进行发布前的准备

首先修改package.json文件,注意private一定要改成false。既然上传到npm上面就是公开如果是true上传就不会成功

然后在修改我们的webpack.config.js

const NODE_ENV = process.env.NODE_ENV; //别忘了这里的常量 //入口,编译的时候'./src/button/index.js'作为入口,运行的时候使用'./src/main.js'作为入口 entry: NODE_ENV == 'development' ? './src/main.js' : './src/button/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/',//路径 filename: 'yizhiyan-ui-button.js',//打包之后的名称 library: 'yizhiyan-ui-button', // 指定的就是你使用require时的模块名 libraryTarget: 'umd', // 指定输出格式 umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define },

然后我们在根目录下新建文件.npmignore文件,此文件是用来避免上传其他无用文件和目录的

.**.md*.ymlbuild/node_modules/src/test/

好了现在配置完成了,发布,如果没有npm账户可以取官网注册,发布之前账户必须要通过邮箱验证

注意:发布之前一定要先生成dist文件夹命令

//生成distnpm run build//登录npm login//发布,如果没有登录需要先登录npmnpm publish

好了,步骤比较详细,如果还是有不明白的地方,欢迎加博主博客进行交流

下一篇将讲到如何使用本次发布的作品

发表评论

电子邮件地址不会被公开。 必填项已用*标注