├── .editorconfig ├── .gitignore ├── README.md ├── amis.config.js ├── commitlint.config.js ├── dist ├── uniAreaPlugin.umd.js ├── uniAreaPlugin.umd.js.LICENSE.txt ├── uniAreaRenderer.css ├── uniAreaRenderer.umd.js └── uniAreaRenderer.umd.js.LICENSE.txt ├── package.json ├── src ├── preview.js └── uni-area-chart │ ├── plugin.ts │ ├── renderer.ts │ └── uni-area-chart.vue ├── tsconfig.json └── type.d.ts /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | max_line_length = 80 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store/ 2 | node_modules/ 3 | package-lock.json 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .hg 10 | .svn 11 | .CVS 12 | .idea 13 | .vscode 14 | .DS_Store 15 | *.suo 16 | *.ntvs* 17 | *.njsproj 18 | *.sln 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue3-amis-custom-widget 2 | > amis 自定义组件模板（vue3.0 技术栈） 3 | 4 | ### 目录说明 5 | - src: 自定义组件源码； 6 | - src/xxx/plugin.ts: 用于注册一个amis-editor插件，注册成功后编辑器左侧组件面板中会展示； 7 | - src/xxx/renderer.ts: 用于注册一个amis渲染器，注册成功后编辑器画布区中才会正常展示自定义组件内容； 8 | - src/xxx/xxx.vue: vue自定义组件源码； 9 | - src/preview.js: 用于本地预览自定义组件内容； 10 | - amis.config.js: amis-widget-cli配置文件。 11 | 12 | ### 开发说明 13 | 14 | 1. **安装依赖** 15 | ```bash 16 | $ npm i 或者 yarn 17 | ``` 18 | 19 | 2. **dev: 本地开发模式（带热更新）** 20 | > dev开发模式：用于在本地editor中调试自定义组件。 21 | ```bash 22 | $ npm run dev 23 | ``` 24 | 25 | 3. **preview: 组件预览模式（带热更新）** 26 | > preview模式：用于预览自定义组件内容。 27 | ```bash 28 | $ npm run preview 29 | ``` 30 | 31 | 4. **linkDebug: 外链调试（amis-saas中预览自定义组件）** 32 | > linkDebug模式：用于在amis-saas中预览和调试自定义组件。 33 | ```bash 34 | $ npm run linkDebug 35 | ``` 36 | 5. **build2lib: 构建自定义组件输出产物** 37 | > build2lib模式：用于构建发布到 npm 中的文件，默认存放到 当前dist目录中。 38 | ```bash 39 | $ npm run build2lib 40 | ``` 41 | 6. **package.json添加自定义组件信息，导入组件扩展包时需要** 42 | > package.json 中添加 amis-widgets 字段，用于放置当前自定义组件信息，有这个amis-widgets 字段才能被识别为amis组件扩展包。 43 | ```bash 44 | ... 45 | "amis-widgets": [ 46 | { 47 | "type": "uni-area-chart", 48 | "framework": "vue3", 49 | "description": "折线区域图", 50 | "entry": "/dist/uniAreaRenderer.umd", 51 | "files": [ 52 | "/dist/uniAreaRenderer.css" 53 | ], 54 | "editorPlugin": { 55 | "pluginEntry": "/dist/uniAreaPlugin.umd", 56 | "tag": [ 57 | "图表组件" 58 | ], 59 | "sort": 100 60 | } 61 | } 62 | ], 63 | ... 64 | ``` 65 | 66 | 7. **发布一个NPM组件扩展包** 67 | > 需要确保package.json中的name值唯一，version值不重复。 68 | ```bash 69 | $ npm publish 70 | ``` 71 | 72 | 8. **发布到制定的NPM仓库** 73 | > 打开NPM配置文件（src/.npmrc），配置为制定仓库地址即可。 74 | ### 配置项说明（amis-widget-cli） 75 | [请查看amis-widget-cli](https://github.com/aisuda/amis-widget-cli) 76 | -------------------------------------------------------------------------------- /amis.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const path = require('path'); 3 | // import uni from "@dcloudio/vite-plugin-uni"; 4 | // 统一路径解析 5 | function resolve(dir) { 6 | return path.resolve(__dirname, dir); 7 | } 8 | 9 | // 包括生产和开发的环境配置信息 10 | module.exports = { 11 | settings: { 12 | enableESLint: false, // 调试模式是否开启ESLint，默认开启ESLint检测代码格式 13 | enableESLintFix: false, // 是否自动修正代码格式，默认不自动修正 14 | enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式 15 | enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式 16 | }, 17 | webpack: { 18 | resolve: { 19 | // webpack的resolve配置 20 | extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.esm.js', '.umd.js', '.min.js', '.json'], // 用于配置webpack在尝试过程中用到的后缀列表 21 | alias: { 22 | '@': resolve('src') 23 | } 24 | }, 25 | // createDeclaration: true, // 打包时是否创建ts声明文件 26 | ignoreNodeModules: false, // 打包时是否忽略 node_modules 27 | allowList: [], // ignoreNodeModules为true时生效 28 | externals: [], 29 | projectDir: ['src'], 30 | // template: resolve('./index.html'), // 使用自己的html模板 31 | cssLoaderUrl: true, 32 | moduleRules: [], // 用于配置自定义loaders 33 | plugins: [] // 用于配置自定义plugins 34 | }, 35 | preview: { 36 | entry: { 37 | // 本地预览自定义组件内容 38 | index: './src/preview.js' 39 | }, 40 | // 用于开启本地调试模式的相关配置信息 41 | NODE_ENV: 'development', 42 | port: 80, 43 | assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径） 44 | assetsSubDirectory: '', 45 | hostname: 'localhost', 46 | cssSourceMap: true, 47 | closeHotReload: false, // 是否关闭热更新 48 | autoOpenBrowser: true 49 | }, 50 | dev: { 51 | entry: { 52 | // 本地编辑器中预览自定义组件 53 | index: ['./src/uni-area-chart/renderer.ts', './src/uni-area-chart/plugin.ts'] 54 | }, 55 | // 用于开启本地调试模式的相关配置信息 56 | NODE_ENV: 'development', 57 | port: 80, 58 | assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径） 59 | assetsSubDirectory: '', 60 | hostname: 'localhost', 61 | proxyTable: { 62 | '/apiTest': { 63 | target: 'http://api-test.com.cn', // 不支持跨域的接口根地址 64 | ws: true, 65 | changeOrigin: true 66 | } 67 | }, 68 | cssSourceMap: true, 69 | closeHotReload: false, // 是否关闭热更新 70 | // closeEditorClient: false, // 是否关闭自动注入editor 71 | autoOpenBrowser: true 72 | }, 73 | linkDebug: { 74 | entry: { 75 | // 外链调试（爱速搭中预览本地自定义组件） 76 | index: ['./src/uni-area-chart/renderer.ts', './src/uni-area-chart/plugin.ts'] 77 | }, 78 | NODE_ENV: 'production', 79 | port: 80, 80 | autoOpenBrowser: false, 81 | closeHtmlWebpackPlugin: true, // 关闭HtmlWebpackPlugin 82 | assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径） 83 | assetsSubDirectory: '', 84 | hostname: 'localhost', 85 | cssSourceMap: true, 86 | closeHotReload: true // 是否关闭热更新 87 | }, 88 | // build2lib 用于打包生成环境的js模块 89 | build2lib: { 90 | entry: { 91 | uniAreaRenderer: './src/uni-area-chart/renderer.ts', 92 | uniAreaPlugin: './src/uni-area-chart/plugin.ts' 93 | }, 94 | // 用于构建生产环境代码的相关配置信息 95 | NODE_ENV: 'production', // development / production 96 | libraryName: 'amisWidget', // 构建第三方功能包时最后导出的引用变量名 97 | assetsRoot: resolve('./dist'), // 打包后的文件绝对路径（物理路径） 98 | assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径） 99 | assetsSubDirectory: '', // 资源引用二级路径 100 | ignoreNodeModules: true, // 打包时是否忽略 node_modules 101 | productionSourceMap: false, 102 | productionGzip: false, 103 | productionGzipExtensions: ['js', 'css', 'json'], 104 | bundleAnalyzerReport: false 105 | } 106 | }; 107 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * https://www.npmjs.com/package/@commitlint/config-conventional\ 3 | * 4 | * Git提交规范-配置文件 5 | * Commit message 由Header、Body 和 Footer三个部分组成，其格式如下： 6 | * (): 7 | * 8 | * 9 | * 10 | *