创建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

openEuler系统通过shell脚本安装openGauss 5.0.0企业版

avatar 华为云开发者联盟
cover

一文了解npm install -g和npm install --save-dev的关系

avatar 华为云开发者联盟
cover

【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit（2）

avatar 华为云开发者联盟