type:String,
default:''
},
text:{
type:String,
default:''
}
}
}
(2)在App.vue中引入使用。
(3)尝试效果,点击跳转到了link所指向的网址。
=========================================================================================
在github上搜索vue-sfc-rollup,可以看到它的说明和使用方式。这是目前创建npm上可用的vue组件最快的方式,使用该工具生成组件项目后,最快时改动一个组件文件,进行打包后即可上传到npm上。
(1)全局安装
npm install -g vue-sfc-rollup
必须全局安装,局部安装试过了,会报错。
(2)使用sfc初始化之后要上传的组件项目
sfc-init
(2)运行项目
打开使用sfc-init命令创建的组件项目,npm i下载node_modules,npm run serve运行
(3)读懂sfc-init的项目
可以看到serve命令执行的是dev/serve.js文件,但是包的入口文件dist/vue-link.ssr.js文件,不难看出这是最后要进行打包之后上传的文件。这个暂且不提,让我们把注意力放到serve.js文件上,发现这是一个小型的vue项目,并且只用到vue-link.vue一个模板组件,这就是我们需要修改替换的组件文件。
==================================================================================
(1)替换组件
将之前本地尝试创建的组件代码直接替换到当前sfc-init创建的项目中,看下效果。
到这一步,我们的组件就完成了。
(2)打包组件项目
打包之前,建议将将要发布的版本修改为最小,并且将name中加上你独有的标志,比如我在后面加上的-sheldon,防止和npm上已经有的包重名,否则有可能因为重名而上传失败。
然后,执行npm run build,生成之前提到过的打包后的入口文件。
(3)发布组件到npm
需要注意的是,之前我们把项目的npm地址换成了淘宝镜像,现在发布自己的组件需要切换到官网,注意,现在地址需要使用https,否则会报错。
npm config set registry registry.npmjs.org/
最后使用npm publish命令,即可成功上传组件。
==============================================================================
(1)重新打开之前的link-demo项目或者自己新建一个vue项目,把npm地址重新切回到淘宝镜像(淘宝镜像10分钟更新一次,有时候还没更新,等等就行),避免不必要的报错
npm config set registry registry.npm.taobao.org/
(2)下载组件npm i vue-link-sheldon
(3)使用组件
===========================================================================================
本来想把这个单独写成一篇文章进行发布的,但是发现根本没有任何技术难度,只需要看懂package.json,并将UI组件按需引入即可。
(1)读懂package.json
关注点放到项目的依赖项上,给大家简单介绍下dependencies、devDependencies和peerDependencies。前两个大家都基本了解,dependencies——运行依赖,比如axios,无论开发时,还是运行时都需要;devDependencies——开发依赖,比如less和sass,只是对css进行语法分析,在项目进行线上部署的时候并不会存在,只有在开发时出于方便用得到;而peerDependencies——对等依赖,这个是只有作为npm包作者时才会了解到的。
我们在进行npm包创建和发布的时候,难免会引用到其他已经发布的npm包。按照我们最开始的认知,如果一个项目引用包,就需要使用npm i 包名命令将包放进该项目的node_modules文件夹下。但是,这样问题就来了,假设你是Element-UI或者其他任何包的作者,你在进行创作开发时,希望在当前的node_modules文件夹下引用到Vue(因为基于Vue),但是在我们进行发布的时候,又不希望依赖中有Vue了,因为别人在下载我Element-UI的时候,肯定已经下载了Vue了,如果在Element-UI中又有Vue,不是一堆冗余文件了吗?所以,我能不能当Element-UI作为包下载的时候,能够直接引用外部同级的node_modules下的Vue包呢?当然可以,peerDependencies就是这样的作用。
总结一下,dependencies是开发时在,运行时也在的依赖;devDependencies开发时在,运行时就扔掉的依赖;peerDependencies是开发时在,运行时就去找同级的依赖。
最后
面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。