《实战:如何使用Vue2.0开发一个npm组件库》
基于 vue 的npm插件
AvatarGiser
这个作者很懒,什么都没留下…
展开
-
《实战:如何使用Vue2.0开发一个npm组件库》- 5、方法开发
1、命名规则小驼峰 **.js,例如:sayHello.js。src/functions文件夹下。2、示例说明注意 export default 名称与文件名一致。const sayHello = (name) => { return `Hello, ${name} `;}export default sayHello;原创 2021-04-02 14:51:22 · 141 阅读 · 0 评论 -
《实战:如何使用Vue2.0开发一个npm组件库》- 4、vue指令开发
1、命名规则全部小写,例如:focus.js。src/directive文件夹下,且与文件名一致。2、示例说明注意 export default。 这是一个input和elementUI input的聚焦指令。 详细参考:官网export default { // 指令的定义 inserted: function (el) { if (el.classList.contains("el-input")) { el.children[原创 2021-04-02 14:48:39 · 83 阅读 · 0 评论 -
《实战:如何使用Vue2.0开发一个npm组件库》- 3、vue组件开发
1、命名规则大驼峰,例如:MyTestComponent.vue。src/components 文件夹下。2、组件基本信息1、界面2、属性3、方法4、事件5、插槽(可选)3、示例说明1、name 属性必须定义,且与文件名一致;2、props属性要定义 type 和 default;3、外部方法用 小驼峰 定义,内部方法以下划线 _ 开头的小驼峰 定义;4、注意<template> 下的一级标签不要定义class样式,在调用时再使用;<t原创 2021-04-02 14:44:12 · 161 阅读 · 0 评论 -
《实战:如何使用Vue2.0开发一个npm组件库》- 2、定义web组件库结构
1、my-webcomponents-test新建 my-webcomponents-test 文件夹,这是项目名也是组件库的名称。2、package.json详细参考新建文件 package.json,用于定义项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。属性说明(1)name:项目名称,全部小写、没有空格、可以使用下划线_ 或横线 -;(2)description:描述,这里说明是基础组件库;(3)version:项目版本号,与mapgis版本原创 2021-03-30 17:54:50 · 395 阅读 · 0 评论 -
《实战:如何使用Vue2.0开发一个npm组件库》- 1、npm 包:创建、发布、更新、删除和使用
环境版本@vue/cli 4.5.12 node 14.15.4 npm 6.14.10一、创建1、先创建一个文件夹Demo,这就是你的工程文件夹根目录。“我的电脑”地址栏中输入cmd,进入控制台。输入如下命令,用于创建 package.json。命令:node init2、根目录下创建 index.js,这时有2个文件。3、index.js 代码如下:exports.sayHello = (name) => { return `Hello, ${n原创 2021-03-26 16:59:31 · 393 阅读 · 0 评论