create script for generating a vue plugin or library
This commit is contained in:
8
.idea/.gitignore
generated
vendored
Normal file
8
.idea/.gitignore
generated
vendored
Normal 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
8
.idea/modules.xml
generated
Normal 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
6
.idea/vcs.xml
generated
Normal 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
9
.idea/vue-plugin-setup.iml
generated
Normal 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
167
setup-vue-library.sh
Normal 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."
|
Reference in New Issue
Block a user