微商城网站建设平台,北京怎样建网站,网站优化工作室,大型做网站公司从0开始搭建、上传npm包 1、上传一个简单获取水果价格的包创建 vite 项目在项目根目录 src 文件夹中创建 index.ts 文件#xff0c;文件内容如下#xff1a;在 main.ts 文件中导入、导出上面创建的方法创建 vite.config.ts 配置文件#xff0c;文件内容如下配置 package.jso… 从0开始搭建、上传npm包 1、上传一个简单获取水果价格的包创建 vite 项目在项目根目录 src 文件夹中创建 index.ts 文件文件内容如下在 main.ts 文件中导入、导出上面创建的方法创建 vite.config.ts 配置文件文件内容如下配置 package.json 文件文件内容如下添加 README.md 项目说明文件打包项目注册 npm 账号项目中使用包修改 npm 包内容方法 2、上传一个简单组件创建 vite 项目创建自定义组件创建对应 index.ts 文件文件内容如下配置 vite.config.ts 文件文件内容如下打包发布在页面中使用组件 1、上传一个简单获取水果价格的包
创建 vite 项目
npm create vite在项目根目录 src 文件夹中创建 index.ts 文件文件内容如下
/*** 获取水果价格的方法* param name 水果名称* returns*/
export const getPrice (name: string) {let price: number 0.0;switch (name) {case 苹果:price 9.99;break;case 香蕉:price 7.89;break;case 梨:price 6.65;break;case 榴莲:price 9.65;break;case 菠萝:price 5.42;break;default:throw new Error(未匹配到水果价格请重新录入);}return price;
};在 main.ts 文件中导入、导出上面创建的方法
import { getPrice } from ./index;export { getPrice };创建 vite.config.ts 配置文件文件内容如下
import { defineConfig } from vite;
export default defineConfig({build: {outDir: dist, // 自定义构建输出目录target: es2020,lib: {entry: src/main.ts, // 入口文件路径formats: [es, cjs],},},
});配置 package.json 文件文件内容如下
{name: bagen-getPrice,private: false,version: 1.0.1,type: module,main: dist/bagen-getPrice.cjs,module: dist/bagen-getPrice.js,scripts: {serve: vite,build: tsc vite build,preview: vite preview},devDependencies: {typescript: ^5.2.2,vite: ^5.0.8}
}添加 README.md 项目说明文件
打包项目
npm run build注册 npm 账号
官网配置 npm 源在项目根目录中运行以下代码
npm config set registry https://registry.npmjs.org登录 npm 输入姓名 和 邮箱 npm login发布
npm publish项目中使用包
安装包
npm install bagen-getPrice -S页面中使用
import { getPrice } from bagen-getPricegetPrice(苹果)修改 npm 包内容方法
安装包
npm install bagen-getPrice -S修改代码代码在 node_modules 文件夹中在 package.json 文件中 更新版本号在自己包目录中运行如下代码
npm publish2、上传一个简单组件
创建 vite 项目
npm create vite创建自定义组件 templateinput typetext v-modelkeyword keydown.entersearchPriceHandle /br /{{ keyword }} {{ price }}
/templatescript setup langts
import { ref } from vue;
const keyword refstring();
const price refstring | number();/*** 查询价格方法*/
const searchPriceHandle () {switch (keyword.value) {case 苹果:price.value 9.98;break;case 香蕉:price.value 8.88;break;case 菠萝:price.value 6.48;break;case 梨:price.value 9.78;break;default:price.value 0.0;throw new Error(未匹配到水果名称请重新输入);}
};
/scriptstyle langscss scoped/style创建对应 index.ts 文件文件内容如下
components -index.ts
import { App } from vue;
import custom from ./custom.vue;const install (app: AppElement) {app.component(Bg-Custom, custom);
};export default {install,
};配置 vite.config.ts 文件文件内容如下
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;export default defineConfig({plugins: [vue()],build: {outDir: dist, // 自定义构建输出目录target: es2020,lib: {entry: src/components/index.ts, // 入口哦文件路径name: bg-get-price, // 暴漏的全局变量最好把名称都统一fileName: bg-get-price, // 输出的包文件名默认取 package.json 的 name},rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: [vue],output: {// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: Vue,},},},},
});打包发布 打包发布过程同上 在页面中使用组件
安装包
npm install bg-get-price -S注册main.ts 文件中注册代码如下
import bgGetPrice from bg-get-price;
// 注册重点
app.use(bgGetPrice)引用
bg-get-price/bg-get-price必须打包上传时候的名称一致
