一、自定义组件
例子：当前时间组件
<div class="current-date-time" :class="{'current-line-feed':lineFeed}">
<!-- 日期 -->
<span class="curent-date" v-if="showDate">{{date}}</span>
<!-- 时间 -->
<span class="curent-time" v-if="showTime">{{time}}</span>
<!-- 周 -->
<span class="curent-week" v-if="showWeek">{{weekday}}</span>
<!-- 插槽 -->
<slot></slot>
</div>
-
slot保留后期可能使用
验证能否正常使用：
二、创建install函数
新建cc-current-time文件夹，文件夹下新建index.js文件
import currentTime from '../components/currentTime.vue'
// vue插件模式需要暴露install方法
// vue.user
const install =(Vue)=>{
Vue.component(currentTime.name,currentTime)
}
export default install
引入组件，在使用Vue.use的时候就是去执行Vue.component，component包含两个参数(name,Object)，
封装组件的时候可以直接使用组件定义的名称，引入的组件就直接作为第二次参数实例。
目录
三、打包组件
1、在pagage.json配置打包路径
常用打包指令：npm run bilid
-- target lib 关键字打包的路径
-- name 打包后的文件名称
-- dest 打包后文件夹名称
打包指令
指令名称:命令 -- target lib 打包路径 --dest 打包后文件夹名 --name 打包后文件名称
2、打包
npm run current-time
生成文件夹
common：必须要使用require引入才能使用
umd：所有的模块化都支持
min：格式化后去掉空格及注释，压缩过后
使用umd.min版本就可以了
四、提交文件夹构建
1、任意目录新建需要上传的文件夹
例：在根目录下新建webpack文件夹，新建打包组件的文件，存放打包后的
umd.min.js文件和css文件2、初始化package.json
current-time文件终端初始化npm init -y
- 如果js名称过长可手动修改，并重新指定路径
keywords：关键字
author：作者
五、npm上注册或者登录
六、发布到npm
1、查看所在的是不是npm源
nrm ls
如果没有安装nrmnpm install nrm -g ,切换到npm镜像上 nrm use npm
2、发射文件路径打开终端
npm login登录
输入用户名\密码\邮箱(输入密码时光标不会动)
npm publish发射
- 发射需要一定的时间才会上传成功，可在npm官网刷新查看是否成功
注意：名字可能重复，如果重复则修改package.json文件中的名称即可
-
上传成功后可查看
七、验证是否可以npm使用
npm i cc-current-time
mian.js文件引入
