创建vite+vue3项目

1. 首先使用vite创建基础开发框架
// npm 方式
npm create vite@latest my-vue-app --template vue

// yarn 方式
yarn create vite my-vue-app --template vue

注：my-vue-app 地方可以替换成自己的项目名称

2. 修改项目中的文件，创建程序入口

打开项目创建创建lib文件夹，及lib/main.js主入口文件， 等会会修改index.html文件，用于测试
在这里插入图片描述

3. 修改 vite.config.js 文件

修改 vite.config.js 文件，配置打包文件名称及打包后全局变量名

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'LabelAi',
      fileName: (format) => `my-lib.${format}.js`
    }
  }
})

注：name: ‘LabelAi’ 项，将成为打包后全局变量的名称

4. 修改 package.json 文件

修改 package.json 文件，配置打包模式及打包文件位置

{
  ......

  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.js",
  "module": "./dist/my-lib.es.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.umd.js"
    }
  },

  ......
}
5. 修改 main.js 文件
  1. 在main.js同级创建math.js文件
    在这里插入图片描述
  2. 在里面写入
export const add = (a,b) => a + b;
  1. 修改main.js文件
import { add } from "./math"

const labelai = {
    name: "labelai",
    add: add
}

export default labelai
6. 打包SDK
  1. 在控制台，运行npm run build
    在这里插入图片描述
  2. 打包完成后会在dist目录生成打包好的sdk文件
    在这里插入图片描述
    至此全部sdk样例文件创建完成，下面创建测试文件
7. 测试SDK文件

修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue + TS</title>
  <script type="text/javascript" src="./dist/my-lib.umd.js"></script>
</head>
<body>
test
<script>
    console.log(LabelAi)
</script>
</body>
</html>

保存后，在控制台输入npm run dev运行项目

在浏览器控制台，输入LabelAi
在这里插入图片描述
可以看到如下结果，恭喜，sdk就可以根据自己需求，开发使用了。

# vue.js # javascript # 前端
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

解析openGauss账本数据库

avatar 华为开发者空间
cover

GaussDB高校行走进哈尔滨，与两校学子共话数据库人才发展

avatar 华为开发者空间
cover

GaussDB数据库高可用部署方案

avatar 华为开发者空间