优化网站内容,3 建设营销型网站流程图,济南市城市建设规划局官方网站,国外手机网站准备工作 1. 注册 npm 账号 还没有 npm 账号#xff1f;去官网注册#xff1a; https://www.npmjs.com 需要记住用户名、密码、邮箱#xff0c;后面需要用到。 2. 查看本地 npm 镜像#xff0c;如果不是默认的#xff0c;需要改回来 npm config get registry重置镜像路…准备工作 1. 注册 npm 账号 还没有 npm 账号去官网注册 https://www.npmjs.com 需要记住用户名、密码、邮箱后面需要用到。 2. 查看本地 npm 镜像如果不是默认的需要改回来 npm config get registry重置镜像路径 npm config set registry https://registry.npmjs.org之后有需要可以再切换回到国内淘宝加速镜像 npm config set registry https://registry.npm.taobao.org创建 npm 包 1. 创建一个项目并安装依赖 npm init vite-app project-name cd project-name npm i2. 安装第三方UI组件 npm install element-plus --save3. 组件编写 4. 组件导出 在 src 根目录中创建index.js文件 // 导入第三方依赖 import element-plus/dist/index.css; import /lib/iconfont/index.js;import CyberLogin from ./package/CyberLogin.vue; // 引入封装好的组件 export default CyberLogin; //导出5. 打包 在 src 根目录中创建index.js文件 // 导入第三方依赖 import element-plus/dist/index.css; import /lib/iconfont/index.js;import CyberLogin from ./package/CyberLogin.vue; // 引入封装好的组件 export default CyberLogin; //导出修改打包配置 vite.config 文件 import vue from vitejs/plugin-vue; import path from path; import { defineConfig } from vite;export default defineConfig({plugins: [vue()],resolve: {alias: {: path.resolve(./src), // 代替src},},css: {preprocessorOptions: {scss: {additionalData: use /styles/index.scss;,},},},build: {lib: {entry: path.resolve(__dirname, src/index.ts),name: CyberLogin,fileName: (format) cyber-login.${format}.js,},rollupOptions: {external: [vue],output: {globals: {vue: Vue,},},},}, }); 打包生成dist文件 npm run build在dist目录下初始化创建 package.json 包的配置信息 npm init -yname包名。 version版本号以后更新也要用到。 description包的描述性文字。 main包的入口文件默认根目录的 index.js。 还有其它配置信息就不一一介绍了。 注意这里 name 要唯一不能和已发布的包重名你可以到官网https://www.npmjs.com/搜索是否已经有同名的包存在。 {name: cyber-login,version: 1.0.7,description: Cyber series login,main: cyber-login.es.js,scripts: {test: echo \Error: no test specified\ exit 1},keywords: [],author: ,license: ISC }发布 npm 包 1. 在终端登录 npm 包管理平台 npm adduser执行命令后依次输入用户名、密码、邮箱最终输出如下内容表示登录成功。 Logged in as timfan on https://registry.npmjs.org/.2. 开始发布 npm publish第一次执行可能会提示 you must verify your email before publishing a new package: www.npmjs.com/email-edit 这是因为注册账号的时候没有使用邮箱进行激活验证。按照提示我们在浏览器中打开这个网址 www.npmjs.com/email-edit输入注册用户时的邮箱然后登录邮箱点击邮件 进行验证即可。 PS D:\study\cyber-login\dist npm publish npm notice npm notice cyber-login1.0.9 npm notice Tarball Contents npm notice 11.4MB cyber-login.es.js npm notice 11.3MB cyber-login.umd.js npm notice 234B package.json npm notice 329.2kB style.css npm notice 1.5kB vite.svg npm notice Tarball Details npm notice name: cyber-login npm notice version: 1.0.9 npm notice filename: cyber-login-1.0.9.tgz npm notice package size: 16.9 MB npm notice unpacked size: 23.0 MB npm notice shasum: 6ed9d2e2c849605c261d60fb1359747512c3cd4a npm notice integrity: sha512-LnRs1mM0tNFfq[...]TbNEs7MMkrUA npm notice total files: 5 npm notice npm notice Publishing to https://registry.npmjs.org with tag latest and default accesscyber-login1.0.9发布成功之后我们可以登录到官网的后台查看自己账号下是否有成功发布的包 或者还可以通过命令 npm install 来查看 E:\private\testnpm install cyber-login npm WARN config global --global, --local are deprecated. Use --locationglobal instead.added 1 package, and audited 2 packages in 47sfound 0 vulnerabilities更新包 后面如果我们需要对包进行升级修改了包的代码后同步发布更新到包管理平台 npm需要修改 package.json 中 version 字段版本号这时还是执行 npm publish使用组件 当我们要在项目中使用的时候就复制npm i cyber-login 这个时候只要像element plus 那样引入就可以全局使用了在main.js中引入 import CyberLogin from cyber-login import cyber-login/style.css