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

This commit is contained in:
zhangyiming 2020-11-19 15:34:21 +08:00
parent 4b99092aef
commit 52f20896d9
5 changed files with 84 additions and 21 deletions

View File

@ -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();
});
}

View File

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

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 KiB

View File

@ -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)