安装vue-cli
请先确保安装了nodejs,vue
全局安装npm install -g @vue/cli
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
vue -V 查看是否安装成功
若报错:bash: vue: command not found ;是因为没找到按照的vue,到安装目录下运行vue -V,查看是否安装成功,若成功,但是其他目录还报错,请查找一下环境变量是否配置正确;若还是无法解决请卸载node,vue,vue-cli重新安装
- 用户变量
- 系统变量
创建项目
- 创建名称为vue-short-cut的项目: vue create vue-short-cut
- 选择设置:可以选择默认的default(babel,eslint),也可以选择Maually select features 选择需要的vuex,typescript等其他配置。
- 安装完成运行查看是否成功:
创建npm包的内容
1、工程目录(开发功能,并测试没问题,若有依赖包正常安装)
2、package.json中的配置
-
查询包是否存在:www.npmjs.com/
-
添加组件信息
{
"name": "vue-short-cut",//包名,该名不能和已有的名称冲突;
"version":"0.1.0", //版本号,不能和历史版本号相同;
"description":"使用vue的directive来快捷获取焦点,支持回车、方向键、回车+方向键",// 简介;
"main":"lib/vue-short-cut.umd.min.js", //入口文件,应指向编译后的包文件;
"keyword":"vue directive short cut focus",//关键字,以空格分割;
"author":"logmei",//作者;
"private":false,//是否私有,需要修改为 false 才能发布到 npm;
"license":"MIT",//开源协议。
...
}
-
添加scripts中的打包命令(cli3+ 不需要单独配置webpack.config.js)
- target: 默认为构建应用,改为 lib 即可启用构建库模式
- name: 输出文件名
- dest: 输出目录,默认为 dist,这里我们改为 lib
- entry: 入口文件路径,默认为 src/App.vue,这里改为 packages/index.js
{
"scripts":{
"lib": "vue-cli-service build --target lib --name vue-short-cut --dest lib packages/index.js"
}
}
-
(可选)git的地址,package.json中添加
"repository": {
"type": "git",
"url": "https://github.com/axios/axios.git"
}
3、vue模板组件(只是为了演示)
若组件有依赖,则正常安装npm i element-ui -D,保存到开发依赖就可以了(.vue文件中必须添加name)
创建插件文件index.js
import SearchComponent from './src'
SearchComponent.install = Vue => Vue.component(SearchComponent.name,SearchComponent)
export default SearchComponent
如果有更多的插件,可以继续添加,文件目录为
创建完成之后,需要创建构建时的入口文件packages/index.js,实现组件全局注册
import CommonDialog from './CommonDialog/src'
import Search from './Search/src'
const components = [
CommonDialog,
Search
]
const install = function(Vue){
if(install.installed) return
install.installed = true
components.map(component => {
Vue.component(component.name,component)
})
}
/** 支持使用标签方式引入 */
if(typeof window != 'undefined' && window.Vue){
install(window.Vue)
}
export default {
install,
...components
}
4、自定义指令(回到正轨)
import KeyDownKey from './common/keydown.js'
const shortCut = {
inserted: function(el, binding, vnode) {
switch (binding.arg) {
case 'keydown' :
setTimeout(function() {
if (binding.modifiers.enter) (KeyDownKey.enter)(el, binding, vnode)
if (binding.modifiers.arrow) (KeyDownKey.arrow)(el, binding, vnode)
if (binding.modifiers.keyDown) (KeyDownKey.keyDown)(el, binding, vnode)
}, 0)
break
}
},
componentUpdated: function(el, binding, vnode) {
switch (binding.arg) {
case 'keydown' :
setTimeout(function() {
if (binding.modifiers.enter) (KeyDownKey.enter)(el, binding, vnode)
if (binding.modifiers.arrow) (KeyDownKey.arrow)(el, binding, vnode)
if (binding.modifiers.keyDown) (KeyDownKey.keyDown)(el, binding, vnode)
}, 0)
break
}
}
}
const install = function(Vue) {
Vue.directive('shortCut', shortCut)
}
shortCut.install = install
export default shortCut
5、在package.json中添加编译命令
cli3提供了build指令
"lib": "vue-cli-service build --target lib --name vue-short-cut --dest lib packages/directives/index.js"
6、设置.gitignore的忽略文件(没有忽略的文件将会发包到npm中,安装后的文件目录还是原来的,相当于解压自己的文件,只是被安装到node_modules下)
/dist
/lib
/src
/packages
/public
vue.config.js
babel.config.js
*.map
*.html
发布npm包
1、到官网注册用户 www.npmjs.com
2、本地发包
登录:npm login
发布:npm publish
发布时会遇到的问题
- 1、需要修改地址,一般为了下载速度快会改为
npm config set registry https://registry.npm.taobao.org
,但发布npm包时必须为npm的地址:npm config set registry http://registry.npmjs.org/
npm ERR! code E403
npm ERR! 403 Forbidden - PUT https://registry.npm.taobao.org/vue-short-cut - [no_perms] Private mode enable, only admin can publish this module
- 2、包重名,修改package.json中的name
npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "vue-short-cut". Are you logged in as the correct user?
- 3、若包名与现有的包很相似,会提示修改包名,修改package.json中的name,并运行
npm publish --access=public
npm ERR! code E403
npm ERR! 403 Forbidden - PUT http://registry.npmjs.org/vue-short-cut - Package name too similar to existing packages; try renaming your package to '@logmei/vue-short-cut' and publishing with 'npm publish --access=public' instead
- 4、版本不允许重复,需要修改package.json中的version
npm ERR! code E403
npm ERR! 403 Forbidden - PUT http://registry.npmjs.org/@logmei%2fvue-short-cut - You cannot publish over the previously published versions: 0.1.2.
- 5、如果想撤销发布的npm包(注意不要随意撤销包) npm unpublish @logmei/vue-short-cut --force
根据规范,只有在发包的24小时内才允许撤销发布的包( unpublish is only allowed with versions published in the last 24 hours); 即使你撤销了发布的包,发包的时候也不能再和被撤销的包的名称和版本重复了(即不能名称相同,版本相同,因为这两者构成的唯一标识已经被“占用”了)
发布成功后查看包
使用发布的npm包
安装 npm i @logmei/vue-short-cut -D
查看安装的包,发现已经安装成功
main.js中引用也可以单独页面引用
import VueShortCut from '@logmei/vue-short-cut'
Vue.use(VueShortCut)