什么是网站标题,版权申请网站,网站建设制作设计,吉林seo排名公司一、npm账号及发包删包等命令
若没有账号#xff0c;可在npm官网#xff1a;https://www.npmjs.com/login 进行注册。 在当前项目根目录下打开终端命令窗口#xff0c;常见命令如下#xff1a; 1、登录命令#xff1a;npm login#xff08;不用每次都重新登录#xff0…一、npm账号及发包删包等命令
若没有账号可在npm官网https://www.npmjs.com/login 进行注册。 在当前项目根目录下打开终端命令窗口常见命令如下 1、登录命令npm login不用每次都重新登录失效了再登 2、首次登录npm adduser 注根据提示依次输入用户名、密码输入内容不展示、邮箱、邮箱验证码。 3、发包命令npm publish 注同一个包不能重复发布同一个版本每次发布需要修改版本号。 4、删包命令npm unpublish 包名 --force例npm unpublish plugins --force 注只能删除72小时以内发布的包且删除的包24小时内不允许重复发布执行失败可能是网络不好重新执行下又可以了。 5、删除指定版本npm unpublish 包名版本号 --force例npm unpublish plugins1.0.0 --force 注会自动回退到上个版本删除后不可再上传相同的该版本号。 6、查看所有的版本npm view 包名 versions例npm view plugins versions 注删除的版本将不再展示。
执行npm publish可能遇到的报错 1、403 Forbidden - PUT https://registry.npmjs.org/plugins - You do not have permission to publish “plugins”. Are you logged in as the correct user? 解因为plugins包名已经存在不是作者没有权限修改已经存在的包需要换个包名。 2、400 Bad Request - PUT https://registry.npmjs.org/myPlugins - “defPlugins” is invalid for new packages. 解包名不支持驼峰命名把myPlugins换成my-plugins就行了。
二、vue项目打包及插件发布相关配置
1、单个插件发布 例如在/src/packages/test123/index.vue中开发需要上传的插件 vite.config.js文件打包配置
import { defineConfig } from vite;
import { resolve } from path;
export default defineConfig({build: {outDir: dist,lib: {entry: resolve(__dirname, ./src/packages/test123/index.vue), // 文件路径name: test123,fileName: test123.min // 打包后生成的文件名},rollupOptions: {external: [vue],output: {globals: {vue: Vue}}}}
})注打包后dist文件夹会自动生成test123.min.js、style.css这两个下方需要用到的文件。 package.json文件配置
{name: test123, // 发布插件的名称private: false, // 是否私有设置为falseversion: 1.0.0, // 发布的版本号type: module,main: dist/test123.min.js, // 插件入口文件style: dist/style.css,files: [dist],scripts: {...},dependencies: {...},devDependencies: {...}
}注意npm发布包或版本根据package.json中配置信息来决定vite.config.js文件中的build配置只是为了打包生成dist。所以如果只是修改包名或者版本号不需要重新打包直接修改json文件对应的信息即可。
项目应用 安装依赖npm i test123 --save 页面使用
scriptimport test from test123; import test/style.css; // 可根据下面注意省略此行
/script
templatetest/test
/template注意可以在插件发布之前在dist/test123.min.js文件中加import ‘./style.css’;这行引入代码这样就不用在每次使用的时候都单独引入插件css文件了。
2、多个插件批量发布 例如在/src/packages文件下创建多个.vue文件并在/src/packages/index.js文件中批量注册
import test123 from ./test123/index.vue;
import test456 from ./test456/index.vue;
const myCompList [test123, test456];
// 批量注册组件
const install function (Vue) {myCompList.forEach(comp {Vue.component(comp.name, comp);})
}
export default install;vite.config.js文件打包配置
import { defineConfig } from vite;
import { resolve } from path;
export default defineConfig({build: {outDir: dist,lib: {entry: resolve(__dirname, ./src/packages/index.js),name: my-plugins,fileName: format my-plugins-${format}.js},rollupOptions: {external: [vue],output: {globals: {vue: Vue}}}}
})package.json文件配置
{name: my-plugins,private: false,version: 0.0.1,type: module,main: dist/my-plugins-es.js,style: dist/style.css,files: [dist],scripts: {...},dependencies: {...},devDependencies: {...}
}项目应用 安装依赖npm i my-plugins --save main.js文件
import { createApp } from vue
import App from ./App.vue
import myPlugins from my-plugins;
import my-plugins/dist/style.css;
createApp(App).use(myPlugins);页面使用(不需要再单独引入插件test123、test456
templatetest123/test123test456/test456
/template三、关于README.md文档编写
README.md是一个使用Markdown格式编写的文本文件通常用于描述软件项目、库或文档的基本信息。 下图借用百度搜索结果
