vscode中创建vue快捷键
1.安装Vetur插件（扩展里面直接搜）2.vscode 界面里面左上角选则 文件=> 首选项=> 用户代码片段=>新建全局代码片段=>在输入框中新建名称为vue.json3.删除里面的注释，当然你也可以留着，把下面的代码粘贴进去！{// Place your 全局 snippets here. Each snippet is defined under a snippet
·
1.安装Vetur插件（扩展里面直接搜）
2.vscode 界面里面左上角选则 文件=> 首选项=> 用户代码片段=>新建全局代码片段=>在输入框中新建名称为vue.json
3.删除里面的注释，当然你也可以留着，把下面的代码粘贴进去！
{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
},
"creat vue": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" components:{\n",
" },",
" data () {",
" return {\n",
" }",
" },",
" created(){\n",
" },",
" methods:{\n",
" },",
" beforeDestroy(){\n",
" }",
"}",
"",
"</script>",
"",
"<style lang='scss' scoped>",
"",
"</style>",
""
],
"description": "creat vue template"
}
}
附赠其他的快捷代码块
1.css
{
"before": {
"prefix": ":bef",
"body": [
"::before{",
"\tcontent: '';",
"\tposition: relative $1;",
"\ttop: 0$2px ;",
"\tleft: 0$3px ;",
"\twidth: 0$4px ;",
"\theight: 0$5px ;",
"\tbackground: url($6);",
"\tbackground-size: 0$4px 0 $5px;",
"\tbackground-position: center;",
"}"
],
"description": "before output to position"
},
"after": {
"prefix": ":aft",
"body": [
"::after{",
"\tcontent: '';",
"\tposition: relative$1;",
"\ttop: 0$2px ;",
"\tleft: 0$3px ;",
"\twidth: 0$4px ;",
"\theight: 0$5px ;",
"\tbackground: url($6);",
"\tbackground-size: 0$4px 0 $5px;",
"\tbackground-position: center;",
"}"
],
"description": "before output to position"
},
}
2.js
{
// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"$.ajax": {
"prefix": "$.aj",
"body": [
"$.ajax({",
"\t url: '$1',",
"\t type: '$2',",
"\t data: {$3},",
"\t success: function(res){",
"\t \t console.log(res);",
"\t\t if(res.success){",
"\t\t\t $4",
"\t\t }",
"\t }",
"});"
],
"description": "Log output to console"
},
"wei tuo shijian": {
"prefix": "$()",
"body": [
"$('#$1').on('click$2','$3',function(){",
"\t$4",
"}"
],
"description": "wei tuo shijian"
},
"chuang jian fu wu qi": {
"prefix": "conex",
"body": [
"\t\t // 导入 express 模块",
"\n\t const express = require('express');",
"\n\t\t // 创建express 的服务器实例、",
"\n\t const app = express();",
"\n\t\t // 托管静态资源 便于页面加载使用",
"\n\t app.use(express.static('./views$1'));",
"\n\t app.use('/semantic',express.static('./semantic$2'))$3;",
"\n\t\t // 调用 app.listen 方法，指定端口号 并启动web服务器",
"\n\t app.listen(3001$4,function(){",
"\n\t\t console.log('express server running at http://127.0.0.1:3001$4');",
"\n\t })"
],
"description": "chuang jian fu wu qi"
},
"lian jie shu ju ku": {
"prefix": "conmysol",
"body": [
"\n\t\t // 这是数据操作模块 只负责操作数据库",
"\n\t\t // 导入mysql 模块",
"\n\t\t const mysql = require('mysql')",
"\n\t\t // 创建数据库连接对象",
"\n\t\t\t const conn = mysql.createConnection({",
"\n\t\t\t host: 'localhost',",
"\n\t\t\t user: 'root',",
"\n\t\t\t password: 'root',",
"\n\t\t\t database: 'mysql_001'",
"\n\t\t })",
"\n\t\t // 把其他模块需要的 conn 暴露出去",
"\n\t\t module.exports = conn;"
],
"description": "lian jie shu ju ku"
},
"chu li shu ju de jie kou": {
"prefix": "consql",
"body": [
"\n\t\t $1.get$2('$3',(req,res) => {",
"\n\t\t\t // 如果是get请求 在这里获取在URL地址栏中以/a/b/c 方式传递的参数 ",
"\n\t\t\t const id = req.params.id;",
"\n\t\t\t // sql 语句",
"\n\t\t\t const sql = '$4';",
"\n\t\t\t //可以在这里传递数据跟数据库",
"\n\t\t\t conn.query(sql,$5,(err, result) => {",
"\n\t\t\t //可以在这里传递数据给前台页面 也可以不返回",
"\n\t\t\t if(err) return res.send({status: 500,msg: err.message,data: null$6});",
"\n\t\t\t res.send({status: 200,msg: 'ok',data: null$7});",
"\n\t\t\t })",
"\n\t\t })"
],
"description": "lian jie shu ju ku"
},
"creatVue": {
"prefix": "Vue",
"body": [
"\t\t var vm = new Vue({",
"\t\t\t el: '#$1',",
"\t\t\t data: {",
"\t\t\t\t $2",
"\t\t\t },",
"\t\t\t methods: {",
"\t\t\t\t handle1$3: function(event) {",
"\t\t\t\t\t $4",
"\t\t\t\t },",
"\t\t\t },",
"\t\t })",
],
"description": "Log output to console"
},
"email-zhengZe": {
"prefix": "regEmail",
"body": [
"regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/"
],
"description": "email-zhengZe"
},
"mobile-zhengZe": {
"prefix": "regMobile",
"body": [
"regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/"
],
"description": "mobile-zhengZe"
},
}
{
// Place your snippets for php here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// 解释把你的代码片段放在这里。每个代码段都定义在一个代码片段的名称下,并有一个前缀、body和description。前缀是用来触发代码片段的东西,身体将被扩展和插入。可能的变量是:$ 1、tab的$ 2、最后游标位置的$ 0、$ { 1:label }、$ { 2:位符的另一个}。占位符
// 相同的id连接。
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
// "$.ajax": {
// "prefix": "$.aja",
// "body": [
// ";",
// "$2"
// ],
// "description": "Log output to console"
// }
}
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献11条内容
所有评论(0)