合肥网站建设制作价格,推荐网站建设服务器,wordpress 显示友情链接,钉子 wordpress发布一个简单的npm包
首先创建一个文件夹#xff08;唯一的命名#xff09;创建package.json包#xff0c;输出npm init#xff0c;一直回车就好。创建index.js文件#xff0c;向外暴露方法。 将包上传或更新到 npm 执行登录命令#xff1a;npm login 登录npm官网…发布一个简单的npm包
首先创建一个文件夹唯一的命名创建package.json包输出npm init一直回车就好。创建index.js文件向外暴露方法。 将包上传或更新到 npm 执行登录命令npm login 登录npm官网根据提示输入用户名和密码邮箱邮箱必须在注册时进行验证 发布版本在登陆命令后接着输入如下命令
npm publish 发布上传后你可以去 npm 官网上查一下自己的包有没有存在。 在项目中安装你的包 npm i xxx -s在main.js中引用 在vue项目任何页面使用 发布一个自己组件包
1、在项目中添加组件库文件夹
在根目录下新建一个plugins文件夹用来放组件项目文件结构为 我的是跟src平级 创建plugins组件文件夹 2、添加配置文件
项目根目录下面添加vue.config.js文件写入以下内容主要是配置webpack的打包 3、编写组件 把封装的组件、封装的指令和封装的过滤器每个都写在分类文件夹中后面在合理添加并继续封装。下面我以datetime这个组件为例是一个时间显示组件 建组件date-time.vue和单独暴露组件的index.js文件 date-time.vue内容如下
templatediv classdate-time :style{ font-size: ${useStyleObj.fontSize}px }p :stylestyleObject{{ nowDate }}/pp :stylestyleObject{{ nowTime }}/p/div
/template
script
export default {name: dateTime,props: {styleObj: {//客户端传递的样式type: Object,default: () ({fontSize: 25,color: [#dcedff, #5ca9ff]})}},computed: {useStyleObj() {//用computed是为了暴露客户端的styleObj样式属性值可以选填更加灵活let size 25;let color [#dcedff, #5ca9ff];if (this.styleObj.fontSize) {size this.styleObj.fontSize;}if (this.styleObj.color) {color this.styleObj.color;}return {fontSize: size,color: color};},styleObject() {//根据客户端传递的样式值配置文字的渐变色return {background: linear-gradient(180deg,${this.useStyleObj[color][0]},${this.useStyleObj.color.length 1? this.useStyleObj[color][1]: this.useStyleObj[color][0]}),-webkit-background-clip: text};}},data() {return {timer: null,nowWeek: ,nowDate: ,nowTime: // styleBox: {}};},created() {this.timer setInterval(() {this.setNowTimes();}, 1000); //时间},beforeDestroy: function() {if (this.timer) {clearInterval(this.timer);}},methods: {setNowTimes() {//时间拼接方法const myDate new Date();const wk myDate.getDay();const yy String(myDate.getFullYear());const mm myDate.getMonth() 1;const dd String(myDate.getDate() 10 ? 0${myDate.getDate()} : myDate.getDate());const hou String(myDate.getHours() 10 ? 0${myDate.getHours()} : myDate.getHours());const min String(myDate.getMinutes() 10? 0${myDate.getMinutes()}: myDate.getMinutes());const sec String(myDate.getSeconds() 10? 0${myDate.getSeconds()}: myDate.getSeconds());const weeks [周日, 周一, 周二, 周三, 周四, 周五, 周六];const week weeks[wk];this.nowDate ${yy}/${mm}/${dd} ${week};this.nowTime ${hou}:${min}:${sec};this.nowWeek week;}}
};
//样式文件
/script
style langscss scoped/styleindex.js文件内容为组件提供 install 方法供组件对外按需引入
import dateTimes from ./date-time.vue;dateTimes.install Vue Vue.component(dateTimes.name, dateTimes); //注册组件export default dateTimes;这个单独暴露组件的 index.js意思是如果这个工程值封装一个组件使用的话就用这个index.js 文件暴露 install 即可了。 plugins 文件夹下面新建一个 index.js 文件为了统一导出所有组件及暴露 install 方法。之前的 index.js 只是安装单个组件而现在这个 index.js 是循环安装所有组件、所有指令、过滤器统一暴露出去可以按需引用组件此时plugins文件夹的内容为 我这里是统一暴露组件、指令、过滤器
//组件
import DateTime from ./components/dateTime/date-time.vue//所有组件列表
const components [DateTime]//定义install方法Vue作为参数
const install Vue {//判断是否安装安装过就不用继续执行if (install.installed) returninstall.installed true//遍历注册所有组件components.map(component Vue.component(component.name, component))
}//检测到Vue再执行
if (typeof window ! undefined window.Vue) {install(window.Vue);
}
export default {install,//所有组件必须具有install方法才能使用Vue.use()...components
}4、在本地页面中使用组件
在main.js中引入 在页面中不用引入使用使用组件因为是全局注册了组件库所以可以直接使用标签这个标签与组件文件中的date-time.vue里的name保持一致只不过一个是驼峰式写法一个是标签名称。 测试可以全局使用组件说明封装的组件没有问题下面可以打包了。 5、打包
在package.json文件中的scripts字段里添加以下内容
scripts: {serve: vue-cli-service serve,build: vue-cli-service build,lib: vue-cli-service build --target lib --name 包名 -dest lib plugins/index.js,lint: vue-cli-service lint},因为在vue-cli中可以通过以下命令将一个单独的入口打包成库 // target: 默认为构建应用改为 lib 即可启用构建库模式 // name: 输出文件名 // dest: 输出目录默认为 dist这里我们改为 lib // entry: 入口文件路径 vue-cli-service build --target lib --name lib [entry] package.json中配置打包信息 .gitignore文件中添加把包的一些测试文件过滤掉最终打包只留下直接封装的文件即plugins中封装的暴露组件 在终端执行npm run lib 即可执行结果 6、发布包 7、使用包 npm i xgs_common -s 在项目文件mainjs中引入。 在项目中直接使用组件中的name即可 例如date-time/
