install
Vue
的插件必须提供一个公开方法install
,该方法会在你使用该插件,
也就是 Vue.use(yourPlugin)
时被调用。这样也就给Vue
全局注入了你的所有的组件。
你为什么要二次封装el组件?
- 提供开发效率
- 提供组件的复用性(组件逻辑较为复杂的时候,封装可以让下次复用更简单)
第 1 章:组件封装
使用方法如下:
- 在项目 / main.js
import ui2010 from 'ui-2010'; // 引入结构
import 'ui-2010/styles/ui2010.css'; // 引入样式
Vue.use(ui2010);
- demo.vue 页面
<template>
<div class="">
<h1>demo页面</h1>
<field-set :tel="tel">
<h1>向slot插槽,填充内容</h1>
</field-set>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
tel: '13213214'
}
},
}
</script>
<style scoped>
</style>
1.1 定义组件
src/components/ui-2010/field-set.vue
<template>
<fieldset>
<legend>2021的组件</legend>
<h1>今天下大雨了</h1>
<h2>{{ msg }}</h2>
<h2>
<b class="telColor">{{ tel }}</b>
</h2>
<slot></slot>
</fieldset>
</template>
<script type="text/javascript">
export default {
name: 'field-set',
data () {
return {
msg: '首次封装组件'
}
},
props: {
tel: {
type: Number,
default: () => {
return 13245678492
}
}
}
}
</script>
<style scoped>
.telColor {
color: red;
}
</style>
1.2 构建install函数
src/ui-2010/index.js
import fieldSet from '../components/ui-2021/field-set.vue'
// Vue的插件模式需要暴露一个install的方法
const install = (Vue) => {
Vue.component(fieldSet.name, fieldSet)
}
export default install;
1.3 在package.json配置打包路径
模仿build打包命令:手动指定打包目录 和 打包的文件名称 项目/package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build", // 将src目录下的所有内容进行打包
"lint": "vue-cli-service lint",
"ui-2010": "vue-cli-service build --target lib ./src/ui-2010/index.js --dest u2010 --name ui2010" // 指定打包路径、打包的名称
},
--target lib
关键字 指定打包的目录--name
打包后的文件名字--dest
打包后的文件夹的名称
在 项目根目录运行命令:npm run ui-2010
或者 yarn ui-2010
接着你会发现:在项目 / 自动创建 u2010文件夹
,如图:
然后在项目/新建packages文件夹
拷贝 u2010文件夹
的文件:xxx.umd.js
和 xxx.css
放入 新建的packages文件夹
然后在packages
路径下,运行命令:npm init -y
最后修改文件的命名,如下图:
第 2 章:发布到 npm
2.1 到npm上注册一个账号
2.2 将源切换成npm官方源
nrm ls 如果没有nrm 使用 npm install nrm -g
nrm use npm 将源切换成npm官方源
2.3 登录
npm login 接着输入:用户名 密码 邮箱
npm publish 发布到远程仓库(npm)上
2.4 删除远程仓库的包
npx force-unpublish package-name '原因描述'