浏览代码

添加vscode快速生成vue3.0代码片段文档

zhangyiming 4 年之前
父节点
当前提交
52f20896d9
共有 5 个文件被更改,包括 84 次插入21 次删除
  1. 17 17
      backend/src/app.ts
  2. 1 1
      backend/src/server.ts
  3. 33 2
      doc/docs/en/plugs/index.md
  4. 二进制
      doc/docs/zh/plugs/images/snip.gif
  5. 33 1
      doc/docs/zh/plugs/index.md

+ 17 - 17
backend/src/app.ts

@@ -1,28 +1,28 @@
-import * as express from "express";
-import * as bodyParser from "body-parser";
+import * as bodyParser from 'body-parser';
+import * as express from 'express';
 
 class App {
     public app: express.Application;
     constructor() {
         this.app = express();
         this.config();
-    };
-    private config(): void{
-        //支持json编码的主体
-        this.app.use(bodyParser.json()); 
-        //支持编码的主体
+    }
+    private config(): void {
+        // 支持json编码的主体
+        this.app.use(bodyParser.json());
+        // 支持编码的主体
         this.app.use(bodyParser.urlencoded({
-            extended: true
-        })); 
-        //设置静态访问目录(Swagger)
+            extended: true,
+        }));
+        // 设置静态访问目录(Swagger)
         this.app.use(express.static('public'));
-        //设置跨域访问
-        this.app.all('*',  (req, res, next) => {
-            res.header("Access-Control-Allow-Origin", "*");
-            res.header("Access-Control-Allow-Headers", "content-type");
-            res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
-            res.header("X-Powered-By", ' 3.2.1');
-            res.header("Content-Type", "application/json;charset=utf-8");
+        // 设置跨域访问
+        this.app.all('*', (req, res, next) => {
+            res.header('Access-Control-Allow-Origin', '*');
+            res.header('Access-Control-Allow-Headers', 'content-type');
+            res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
+            res.header('X-Powered-By', ' 3.2.1');
+            res.header('Content-Type', 'application/json;charset=utf-8');
             next();
         });
     }

+ 1 - 1
backend/src/server.ts

@@ -39,5 +39,5 @@ app.get('/getApi', (req, res) => {
 })
 
 app.listen(PORT, () => {
-    console.log('Swagger文档地址:', `http://localhost:${PORT}`);
+  console.log('Swagger文档地址:', `http://localhost:${PORT}`);
 })

+ 33 - 2
doc/docs/en/plugs/index.md

@@ -1,6 +1,37 @@
-## 1. hyper
+## 1. VsCode Plugs
+
+please install TSLint、Vetur、vscode-icons、ES7 React
+
+## 2. Quick generation of code fragment by vscode
+Ctrl+Shift+P Check configure user code fragment search vue.json Copy the code below Enter Vue in the .vue file and press enter
+```
+{
+	"Vue3.0Quick template generation": {
+		"prefix": "Vue3.0",
+		"body": [
+			"<template>",
+			"\t<div>\n",
+			"\t</div>",
+			"</template>\n",
+			"<script lang='ts'>",
+			"export default {",
+			"\tsetup(){",
+			"\t\treturn{\n\n\t\t}",
+			"\t},",
+			"}",
+			"</script>\n",
+			"<style scoped>\n",
+			"</style>",
+			"$2"
+		],
+		"description": "Vue3.0"
+	}
+}
+```
+![Screen shot](./images/snip.gif)
+## 3. hyper
 
 ![Screen shot](./images/hyper.gif)
 
 A beautification command panel plug-in, based on TS, version: windows, MAC, Linux  
-Download address: https://hyper.is/#installation
+Download address: https://hyper.is/#installation

二进制
doc/docs/zh/plugs/images/snip.gif


+ 33 - 1
doc/docs/zh/plugs/index.md

@@ -1,4 +1,36 @@
-## 1. hyper
+## 1. VsCode插件
+
+请安装TSLint、Vetur、vscode-icons、ES7 React
+
+## 2. VsCode快速生成代码片段
+Ctrl+Shift+P 选中配置用户代码片段 搜索vue.json,将下面代码复制进去,在.vue文件输入vue回车即可
+```
+{
+	"Vue3.0快速生成模板": {
+		"prefix": "Vue3.0",
+		"body": [
+			"<template>",
+			"\t<div>\n",
+			"\t</div>",
+			"</template>\n",
+			"<script lang='ts'>",
+			"export default {",
+			"\tsetup(){",
+			"\t\treturn{\n\n\t\t}",
+			"\t},",
+			"}",
+			"</script>\n",
+			"<style scoped>\n",
+			"</style>",
+			"$2"
+		],
+		"description": "Vue3.0"
+	}
+}
+```
+![Screen shot](./images/snip.gif)
+
+## 3. hyper
 
 ![Screen shot](./images/hyper.gif)