create script for generating a vue plugin or library

This commit is contained in:
2025-02-22 23:58:47 -07:00
commit 21c42f3950
5 changed files with 198 additions and 0 deletions

8
.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

8
.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/vue-plugin-setup.iml" filepath="$PROJECT_DIR$/.idea/vue-plugin-setup.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

9
.idea/vue-plugin-setup.iml generated Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="Go" enabled="true" />
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

167
setup-vue-library.sh Normal file
View File

@ -0,0 +1,167 @@
#!/bin/bash
# This script sets up a Vue 3 + TypeScript library project ready for development
# and eventual building & publishing of your distributable component(s).
# 1. Create your project folder.
read -p "Enter your project folder name: " project_folder
mkdir "$project_folder"
cd "$project_folder" || exit
# 2. Initialize a new npm package.
npm init -y
# 3. Install needed dependencies.
# - vue: The Vue framework (we install version 3)
# - typescript: For TS support
# - vite and @vitejs/plugin-vue: For development and build tooling
npm install vue@3
npm install -D typescript vite @vitejs/plugin-vue
# 4. Create the src folder and add a minimal component and entry point.
mkdir src
# Create a sample Vue component (MyComponent.vue)
cat > src/MyComponent.vue <<'EOF'
<template>
<div>
<!-- Your component markup -->
Hello from MyComponent!
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'MyComponent'
});
</script>
<style scoped>
/* Your component styles */
</style>
EOF
# Create an index entry file that exports your component (or library)
cat > src/index.ts <<'EOF'
import { App, Plugin } from 'vue';
import MyComponent from './MyComponent.vue';
const MyLibrary: Plugin = {
install(app: App) {
app.component('MyComponent', MyComponent);
}
};
export { MyComponent };
export default MyLibrary;
EOF
# 5. Create a tsconfig.json file for TypeScript configuration.
cat > tsconfig.json <<'EOF'
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",
"lib": ["ESNext", "DOM"],
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"declaration": true,
"declarationDir": "dist",
"sourceMap": true,
"resolveJsonModule": true,
"jsx": "preserve"
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
"exclude": ["node_modules", "dist"]
}
EOF
# 6. Set up Vite for library mode by creating vite.config.ts.
cat > vite.config.ts <<'EOF'
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
lib: {
// Set the entry point for our library
entry: path.resolve(__dirname, 'src/index.ts'),
name: 'MyLibrary',
formats: ['es', 'umd'],
// Customize file names for the dist outputs.
fileName: (format) => \`index.\${format}.js\`
},
rollupOptions: {
// Ensure vue is treated as an external dependency.
external: ['vue'],
output: {
globals: {
vue: 'Vue'
}
}
}
}
});
EOF
# 7. Update package.json using a Node.js script.
# Create update-package.js to modify package.json accordingly.
cat > update-package.js <<'EOF'
const fs = require('fs');
const pkgFile = 'package.json';
const pkg = JSON.parse(fs.readFileSync(pkgFile, {encoding: 'utf-8'}));
// Update package.json fields needed for a distributable library.
pkg.main = 'dist/index.umd.js';
pkg.module = 'dist/index.es.js';
pkg.types = 'dist/index.d.ts';
pkg.files = ['dist'];
pkg.scripts = pkg.scripts || {};
pkg.scripts.build = 'vite build';
pkg.peerDependencies = {
vue: '^3.0.0'
};
fs.writeFileSync(pkgFile, JSON.stringify(pkg, null, 2));
EOF
# Run the Node.js script to update package.json.
node update-package.js
# Remove the update script after running.
rm update-package.js
# 8. Create a basic README file.
cat > README.md <<'EOF'
# Vue 3 Component Library
This project is set up as a library of Vue 3 components written in TypeScript.
## Development
- Add your components in the src folder.
- Build the library with: npm run build
## Usage
After publishing, install via npm and register the library as a Vue plugin:
import { createApp } from 'vue'
import MyLibrary from 'your-library-name'
import App from './App.vue'
const app = createApp(App);
app.use(MyLibrary);
app.mount('#app');
EOF
echo "Setup complete!"
echo "Next steps:"
echo "1. Customize your component(s) in the src folder."
echo "2. Run 'npm run build' to build distributable files into the dist folder."
echo "3. Publish your package to npm as desired."