一、自定義組件
例子：當前時間組件
<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文件引入
