modify readme and optimize code when create same name component to warn user

Author: 苑朋飞

README.md

@@ -4,3 +4,23 @@
 > The reason I make it is to save my time in work, because my new team is still using Vue2 and write class style component, so I have to adapt to it.(I am a react user and favor into hooks and functional style.)
 > I hope this little tool will help you too.
 
+
+### code example
+
+```html
+<template>
+</template>
+    
+<script lang="ts">
+    
+import { Vue, Component, Prop } from "vue-property-decorator";
+    
+@Component
+export default class A extends Vue {}
+    
+</script>
+    
+<style lang="less" scoped>
+    
+</style>
+```

package.json

@@ -3,7 +3,7 @@
 	"displayName": "CreateVueClassComponent",
 	"description": "create vue class component",
 	"icon": "images/vue_logo.png",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"publisher": "pengfeiyuan",
 	"engines": {
 		"vscode": "^1.57.0"

src/createVueClassComponent.ts

@@ -18,8 +18,7 @@ function getTemplate(componentName: string) {
     return `<template>\n</template>
     \n<script lang="ts">
     \nimport { Vue, Component, Prop } from "vue-property-decorator";
-    \n@Component
-    \nexport default class ${componentName} extends Vue {}
+    \n@Component\nexport default class ${componentName} extends Vue {}
     \n</script>
     \n<style lang="less" scoped>
     \n</style>`;
@@ -31,31 +30,33 @@ function writeFile(content: Buffer | string, filePath: string, componentName: st
     fs.writeFileSync(_filePath, content);
 }
 
-function createComponent(uri: { path: string }, componentName: string) {
-    const content = getTemplate(componentName);
+async function createComponent(uri: vscode.Uri, componentName: string) {
+    const path = uri.path;
+    const arr = path.split('/');
 
-
-    const arr = uri.path.split('/');
-
-    if (fs.lstatSync(uri.path).isFile()) {
+    if (fs.lstatSync(path).isFile()) {
         arr.pop();
     }
 
     const filePath = arr.join('/');
+   
+    if (fs.existsSync(`${filePath}/${componentName}.vue`)) {
+        vscode.window.showWarningMessage(`You already have one ${componentName} component.`);
+        return;
+    }
 
 
-    writeFile(content, filePath, componentName);
+    writeFile(getTemplate(componentName), filePath, componentName);
 }
 
 module.exports = function (context: { subscriptions: any[]; }) {
-    context.subscriptions.push(vscode.commands.registerCommand('createvueclasscomponent.create', async (uri: { path: string }) => {
+    context.subscriptions.push(vscode.commands.registerCommand('createvueclasscomponent.create', async (uri: vscode.Uri) => {
         const componentName = await vscode.window.showInputBox({
             ignoreFocusOut: true,
             placeHolder: 'MyComponent',
             prompt: 'What is the name of the new component?',
         });
-        
+
         createComponent(uri, convertComponentName(componentName!));
     }));
-
 };