利用Vue-cli快速原型开发一个Vue插件

直接开始,代码详情不细说,以从VUE组件=>插件=>提交到npm为主

1、安装工具

按照Vue-cli官方给的步骤安装主要用到的东西。

  npm install -g @vue/cli-service-global

OK,安装好后简单介绍下如何使用,详细自行去官方查看文档

a、vue serve

简单的说就是让你不用为了写一个vue页面要引入什么cdn啊,搭建一个脚手架啊才能够执行,而是你创建一个demo.vue,那么你执行下命令,就跑起来了。

一种:vue serve main.js、index.js、App.vue 或 app.vue
另外:vue serve *.vue(随便啥vue文件都行)

b、vue build

这个就是我们所需要的,将VUE组件=>插件的重要东东,先放命令,后面会用到

vue build --target wc(或)lib --name my-demo *.vue (要打包的那个组件名)

2、创建一个App.vue(为了方便,自己随意取名字)

没啥可说,写好你的内容,记得,以一个组件思维去写。

可能遇到的坑:

a、引入外部的东东

正常引入就是了,老样子,npm install引入,打包的时候会关联起来的

b、额,暂时想不起来

.....

3、开始打包

vue build --target wc(或)lib --name my-demo *.vue (要打包的那个组件名)

wc是Web Components 组件

lib是库

4、提交到npm

a、在打包后的dist文件中,npm init,主要对这两个操作,其他回车都行

{
  "name": "npm-test111",  //确定没人占用这个名字
  "version": "0.0.1"
}

b、创建npm 账号,官网创建!
c、发布

//登录,输入用户名,密码,邮箱
npm login
//登录成功后,对于文件dist下
npm publish

附上npm上传他人教程

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容