上传Vue3+vite+Ts组件到npm官方库保姆级教程

文章目录

• 新建项目
• • 1、vite创建项目
• 编写组件
• • 1、删除无用代码
  • 2、新建文件夹LiButton,
  • 3、新建抛出文件
  • 4、新建组件
  • 5、index.ts内容
  • 6、下载UI组件
• 上传组件
• • 1、更改vite.config.ts文件
  • 2、打包
  • 3、上传操作
  • 4、上传
• 使用组件
• • [1、 下载](#1、 下载)
  • [2、 引用](#2、 引用)
  • 3、使用

新建项目

1、vite创建项目

npm create vite@latest demo-test(项目名称)

我的项目名称叫做demo-test,大家创建的时候可以根据自己的名称来创建

下一步，框架选择vue,选择后回车

然后语言选择TypeScript,选择后回车

然后会出现三个指令,这三个指令是依次执行的

cd demo-tese 进入demo-test文件夹

npm installl 然后下载依赖

npm run dev 最后启动项目

执行上述的三个指令以后，就会出现启动的地址，然后Ctrl按住，点击地址，就能出现项目了

编写组件

1、删除无用代码

App.vue中，红框部分都可删除

删除后，页面全空白状态并且无报错，表示正确

同时也删除components中的HelloWord.vue组件

删除后页面是全白状态

2、新建文件夹LiButton,

在components下新建文件夹，我这里做个测试，就起名 LiButton,大家叫任何名字都可以，层级关系如下，

3、新建抛出文件

然后在LiButton，下面建立Buttons，文件夹，名字也可随意，大家按照自己下习惯来就好，然后再LiButton文件夹中，建立index.ts文件，层级关系如下，index.ts和Buttons文件夹是同级的

4、新建组件

然后在Buttons文件夹下，新增NewTestButton.vue文件，这个NewTestButton文件，就是编写组件代码的地方，我这里只写一个组件，所以就只增加了一个，如果想要发布多个组件在一个包里的话，可以多编写几个组件，层级如下

5、index.ts内容

// components->LiButton->index.ts
import NewButton from './Buttons/NewTestButton.vue'
// 如果有多个组件，可以在这里添加，比如cesbutton,记得引入
//  const components = [NewButton,cesbutton];
const components = [NewButton];
const install = (app: any) => {
  components.forEach((component) => {
    app.component(component.name , component);
  });
};

export { NewButton };
export default { install };

6、下载UI组件

如果需要借助其他UI，可以提前下载，我这里用iview做例子，iview地址

进入官网，安装->NPM安装，找到指令，

在项目中的终端中输入指令，下载组件，

看到这样，就是下载成功了， 官网有介绍，可以查看引入方法

然后进入项目的main.ts,可看到主要加入的代码是以下

import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'

// main.ts 整体代码
import { createApp } from 'vue'
import './style.css'
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import App from './App.vue'
createApp(App).use(ViewUIPlus).mount('#app')

然后就可以用这个里面的所有UI了，比如我就使用几个按钮，

// components->LiButton->Buttons->NewTestButton.vue
<script setup lang="ts">
import { } from "vue"
</script>
<script lang="ts">
export default {
  name: 'libuttons', // 显式定义 name ，这里一定要写
}
</script>
<template>
  <Space direction="vertical">
    <Space wrap>
      <Button>Default</Button>
      <Button type="primary">Primary</Button>
      <Button type="dashed">Dashed</Button>
      <Button type="text">Text</Button>
    </Space>
    <Space wrap>
      <Button type="info">Info</Button>
      <Button type="success">Success</Button>
      <Button type="warning">Warning</Button>
      <Button type="error">Error</Button>
    </Space>
  </Space>
</template>

<style lang="scss" scoped></style>

然后此刻的页面还是空的，是正常的，

注意：vue组件中的name一定要写，因为在页面使用的时候，用的名称就是这个name

然后再main.ts中引用，试试写的idnex.ts是否生效

import LiButton from './components/LiButton'
createApp(App).use(ViewUIPlus).use(LiButton).mount('#app')

然后再APP.vue文件中，引用这个组件

<script setup lang="ts">
</script>

<template>
<libuttons></libuttons>
</template>

<style scoped>

</style>

这个时候，页面上就有画面了，说明抛出的各种方法都写正确了

上传组件

1、更改vite.config.ts文件

前提：

下载以下依赖

npm i path

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
export default defineConfig({
  plugins: [vue()],
   build: {
    outDir: "test-demo-button", //输出文件名称，名称是自定义的
    lib: {
      entry: path.resolve(__dirname, "./src/components/LiButton/index.ts"), //指定组件编译入口文件，根据自己项目的路径来
      name: "test-demo-button",
      fileName: "test-demo-button",
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: "Vue",
        },
      }
    }
  }
})

2、打包

然后执行打包指令，一般情况都是build，可在package.json中看到

如果出现以下的报错，看自己本身的node是否匹配vite，解决方法就是将node升级最新版本即可

如果本地安装有nvs的话，就可以使用nvs控制node版本，也可以使用其他的切换工具，怎么方便怎么来
nvs -ls 查看版本

nvs use 版本号 切换版本

node -v 查看是否切换成功

切换成功以后，在执行打包指令

yarn build

出现这样的，就表示打包成功了，

此刻可以看到项目目录中多了一个文件，test-demo-button

3、上传操作

终端先进入这个打包后的文件夹，因为当前还在根目录下

然后执行 npm init -y // 创建package.json文件

看到这样出现，即表示创建成功，然后更改版本号

// test-demo-button->package.json
// 我个人一半是从0.0.1开始的，如果偏好从1.0.0开始的，可以不用更改
 "version": "0.0.1",
// 然后增加  "types" 字段
// 目的：告诉 TypeScript 编译器：类型定义文件（.d.ts）的位置（这里是 types/index.d.ts）。
// 这样，其他开发者在使用你的库时，能获得 代码提示、类型检查 等 TypeScript 支持。
 "types": "types/index.d.ts",

即全部的test-demo-button->package.json文件如下

// test-demo-button->package.json
{
  "name": "test-demo-button",
  "version": "0.0.1",
  "main": "test-demo-button.js",
   "types": "types/index.d.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

因为增加了types类型检查，所以需要增加文件，types文件夹，然后再文件夹下增加index.d.ts文件，层级如下

index.d.ts文件中如下

// test-demo-button->types->index.d.ts
import { App, Component, Plugin } from 'vue';

// 定义 About 组件的类型
declare const libuttons: Component; // libuttons是定义的组件的名字，在vue文件的name属性中

// 定义安装函数类型
declare const install: Plugin & {
  installed?: boolean;
};

// 导出类型
export { libuttons };//  libuttons是定义的组件的名字，在vue文件的name属性中
export default install;

4、上传

终端中输入指令，

注意：记得切换到官方镜像文件

 npm config set registry https://registry.npmjs.org/
 npm publish

确保当前路径是在打包后的文件夹中，

看到当前，即表示组件上传成功

使用组件

1、 下载

使用vite.config.ts中的name下载依赖,记得将路径切换到根目录，因为刚刚上传依赖的时候路径在打包后的文件，所以需要切换到根目录中，不然就下载到打包后的文件中了

// 我这里的名字是 test-demo-button，
npm i test-demo-button

然后看到根目录下的package.json，可以看到下载成功了，

2、 引用

在main.ts中,

import { createApp } from 'vue'
import './style.css'
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
// 引入的文件，如果依赖包中有CSS，也记得引入，可以在node/modueles文件夹下，下载的依赖包中看到
// 因为我这个简单，所以没有css文件，下图可以看到，如果有的话记得引入
import NewButton from 'test-demo-button' 

import App from './App.vue'

createApp(App).use(ViewUIPlus).use(NewButton).mount('#app')

3、使用

页面中使用的还是vue中的name属性，作为组件名

<script setup lang="ts">
</script>

<template>
<libuttons></libuttons> // 这是我的name，大家可以看到
</template>

<style scoped>

</style>

然后页面上就有自己的内容了

到此，vue3+vite+ts的组件上传npm库以及下载使用的教程就结束啦，感谢观看