Vue使用代码片段生成代码 自定义语法模板
一、基础设置
1、打开VsCode安装Vetur插件
2.使用快捷Ctrl + Shift + P唤出控制台
3、然后输入“snippets”
4、如果第一次创建，选择“新代码片段”新建文件，输入文件名称“Demo” ，如果已创建，输入关键字搜索“现有代码片段”后选择。
5、输入文件名称后，创建代码片段文件，会看到如下代码片段文件。
1 { 2 // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 3 // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 4 // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 5 // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 6 // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 7 // Placeholders with the same ids are connected. 8 // Example: 9 // "Print to console": { 10 // "scope": "javascript,typescript", 11 // "prefix": "log", 12 // "body": [ 13 // "console.log('$1');", 14 // "$2" 15 // ], 16 // "description": "Log output to console" 17 // } 18 }
6、在Demo文件中输入以下代码片段，即可
1 "Print to console": { 2 "prefix": "vue", 3 "body": [ 4 "<!-- $1 -->", 5 "<template>", 6 "<div class=\"\">", 7 "", 8 "</div>", 9 "</template>", 10 "", 11 "<script>", 12 "export default {", 13 " name:\"\",", 14 " data() {", 15 " return {", 16 "", 17 " }", 18 " },", 19 " created() {", 20 "", 21 " },", 22 " mounted() {", 23 "", 24 " }", 25 "}", 26 "</script>", 27 "<style lang=\"less\" scoped>", 28 "/* @import url(); 引入css类 */", 29 "$0", 30 "</style>" 31 ], 32 "description": "生成vue模板" 33 }
7、然后新建一个 vue 文件，输入“vue”，按下回车键或者Tab键，模板就自动生成了
注意：
1、模板中如果有双引号，特殊字符，如（$），加\\即可。
2、步骤6代码片段中标红的，prefix值，Vue可以改成你自己的快捷指令，如VueApi。
配置详解
| 配置项目 | 作用 |
|---|---|
| $0 | 为默认鼠标光标位置 |
| "prefix": "vue" | 设置快捷指令为vue |
| "body": [ ] | 内部为自定义代码片段内容 |
| "description": "A vue2 file template" | 设置提示信息 |
二、实战
1、创建api文件夹下与服务器端对接的js文件，代码如下（复制即可用，包括了基本的增删改查功能）。
1 { 2 // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 3 // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 4 // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 5 // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 6 // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 7 // Placeholders with the same ids are connected. 8 // Example: 9 // "Print to console": { 10 // "scope": "javascript,typescript", 11 // "prefix": "log", 12 // "body": [ 13 // "console.log('$1');", 14 // "$2" 15 // ], 16 // "description": "Log output to console" 17 // } 18 "Print to console": { 19 "prefix": "vueApi", 20 "body": [ 21 "/*", 22 " *@Author: 创建人", 23 " *@Date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}", 24 " *@Description: 在此添加功能描述$0", 25 "*/", 26 "", 27 "import request from \"@/utils/request\";", 28 "", 29 "/**", 30 "//1、查询示例列表", 31 "@param{Object}data 查询参数", 32 "@returns 参数列表", 33 "*/", 34 "export function listDemo(data) {", 35 " return request({", 36 " url: \"api/EDemo/GetByPage\",", 37 " method: \"post\",", 38 " data", 39 " });", 40 "}", 41 "", 42 43 "/**", 44 "//2、根据示例Id查找一条示例信息", 45 "@param{String,Int,Guid等}Id 查询参数", 46 "@returns 示例信息", 47 "*/", 48 "export function getDemoById(Id) {", 49 " return request({", 50 " url: \"api/EDemo/GetByID?id=\" + Id,", 51 " method: \"get\"", 52 " });", 53 "}", 54 "", 55 56 "/**", 57 "//3、新增示例", 58 "@param{Object}data 新增数据", 59 "@returns 新增结果(bool)", 60 "*/", 61 "export function addDemo(data) {", 62 " return request({", 63 " url: \"api/EDemo/Add\",", 64 " method: \"post\",", 65 " data", 66 " });", 67 "}", 68 "", 69 70 "/**", 71 "//4、修改示例", 72 "@param{Object}data 修改数据", 73 "@returns 修改结果(bool)", 74 "*/", 75 "export function updateDemo(data) {", 76 " return request({", 77 " url: \"api/EDemo/Update\",", 78 " method: \"post\",", 79 " data", 80 " });", 81 "}", 82 "", 83 84 "/**", 85 "//5、删除示例(逻辑删除，支持一条及多条)", 86 "@param{Object}data 删除数据Id集合", 87 "@returns 删除结果(bool)", 88 "*/", 89 "export function delDemo(data) {", 90 " return request({", 91 " url: \"api/EDemo/DelByIds\",", 92 " method: \"post\",", 93 " data", 94 " });", 95 "}", 96 "", 97 98 "//6、导出示例", 99 "export function exportDemo(data) {", 100 " return request({", 101 " url: \"api/EDemo/Export\",", 102 " method: \"post\",", 103 " data", 104 " });", 105 "}", 106 "$2" 107 ], 108 "description": "生成与服务器端对应的基础增删改查功能(生成代码后替换关键字Demo即可)" 109 } 110 }
2、新建Js文件，输入Vue关键字，回车即可生成模板中的文件。
3、添加Vue页面代码片段，（包括基础增删改查功能，使用方法同实战中步骤2，此代码片段你不一定适应，有页面样式，封装的方法）
1 { 2 // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 3 // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 4 // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 5 // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 6 // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 7 // Placeholders with the same ids are connected. 8 // Example: 9 // "Print to console": { 10 // "scope": "javascript,typescript", 11 // "prefix": "log", 12 // "body": [ 13 // "console.log('$1');", 14 // "$2" 15 // ], 16 // \"description": \"Log output to console" 17 // } 18 "Print to console": { 19 "prefix": "vueViews", 20 "body": [ 21 "<template>", 22 " <div class=\"app-container\">", 23 " <!-- 查询参数 -->", 24 " <el-form :model=\"queryParams\" ref=\"queryForm\" :inline=\"true\" v-show=\"showSearch\" label-width=\"68px\">", 25 " <el-form-item label=\"示例名称\" prop=\"DemoName\">", 26 " <el-input v-model=\"queryParams.Query.DemoName\" placeholder=\"请输入示例名称\" clearable size=\"small\" @keyup.enter.native=\"handleQuery\" />", 27 " </el-form-item>", 28 " <el-form-item>", 29 " <el-button type=\"primary\" icon=\"el-icon-search\" size=\"mini\" @click=\"handleQuery\">搜索</el-button>", 30 " <el-button icon=\"el-icon-refresh\" size=\"mini\" @click=\"resetQuery\">重置</el-button>", 31 " <el-button type=\"warning\" plain icon=\"el-icon-download\" size=\"mini\" :loading=\"exportLoading\" @click=\"handleExport\">导出</el-button>", 32 " </el-form-item>", 33 " </el-form>", 34 "", 35 " <!-- 操作按钮 -->", 36 " <el-row :gutter=\"10\" class=\"mb8\">", 37 " <el-col :span=\"1.5\">", 38 " <el-button type=\"primary\" plain icon=\"el-icon-plus\" size=\"mini\" @click=\"handleAdd\">新增</el-button>", 39 " </el-col>", 40 " <el-col :span=\"1.5\">", 41 " <el-button type=\"success\" plain icon=\"el-icon-edit\" size=\"mini\" :disabled=\"single\" @click=\"handleUpdate\">修改</el-button>", 42 " </el-col>", 43 " <el-col :span=\"1.5\">", 44 " <el-button type=\"danger\" plain icon=\"el-icon-delete\" size=\"mini\" :disabled=\"multiple\" @click=\"handleDelete\">删除</el-button>", 45 " </el-col>", 46 " <el-col :span=\"1.5\" v-show=\"false\">", 47 " <el-button type=\"warning\" plain icon=\"el-icon-download\" size=\"mini\" :loading=\"exportLoading\" @click=\"handleExport\">导出</el-button>", 48 " </el-col>", 49 " <right-toolbar :showSearch.sync=\"showSearch\" @queryTable=\"getList\"></right-toolbar>", 50 " </el-row>", 51 "", 52 " <!-- 表格数据 -->", 53 " <el-table v-loading=\"loading\" :data=\"taskList\" @selection-change=\"handleSelectionChange\">", 54 " <el-table-column type=\"selection\" width=\"55\" />", 55 " <el-table-column label=\"序号\" width=\"50\">", 56 " <template slot-scope=\"scope\">", 57 " <span>{{ (queryParams.Page - 1) * queryParams.PageSize +(scope.\\$index + 1)}} </span>", 58 " </template>", 59 " </el-table-column>", 60 " <el-table-column label=\"示例名称\" prop=\"DemoName\" />", 61 " <el-table-column label=\"创建时间\" prop=\"CreateTime\" width=\"150\" />", 62 " <el-table-column label=\"操作\" width=\"120\" class-name=\"small-padding fixed-width\">", 63 " <template slot-scope=\"scope\">", 64 " <el-button size=\"mini\" type=\"text\" icon=\"el-icon-edit\" @click=\"handleUpdate(scope.row)\">修改</el-button>", 65 " <el-button size=\"mini\" type=\"text\" icon=\"el-icon-delete\" @click=\"handleDelete(scope.row)\">删除</el-button>", 66 " </template>", 67 " </el-table-column>", 68 " </el-table>", 69 "", 70 " <!-- 页脚 -->", 71 " <pagination v-show=\"total > 0\" :total=\"total\" :page.sync=\"queryParams.Page\" :limit.sync=\"queryParams.PageSize\" @pagination=\"getList\" />", 72 "", 73 " <!-- 添加或修改示例对话框 -->", 74 " <el-dialog :title=\"title\" :visible.sync=\"open\" :close-on-click-modal=\"false\" min-width=\"600px\" width='68%' append-to-body>", 75 " <el-form ref=\"form\" :model=\"form\" :rules=\"rules\" label-width=\"110px\">", 76 " <el-form-item label=\"示例名称\" prop=\"DemoName\">", 77 " <el-input v-model=\"form.DemoName\" placeholder=\"请输入内容\" />", 78 " </el-form-item>", 79 " </el-form>", 80 " <div slot=\"footer\" class=\"dialog-footer\">", 81 " <el-button type=\"primary\" @click=\"submitForm\" :loading=\"loadingsub\">{{ loadingsub ? \"提交中 ...\" : \"确 定\" }}</el-button>", 82 " <el-button @click=\"cancel\">取 消</el-button>", 83 " </div>", 84 " </el-dialog>", 85 " </div>", 86 "</template>", 87 "", 88 "<script>", 89 "import { mapGetters } from 'vuex'", 90 "import * as demoApi from \"@/api/basicwork/test\";", 91 "", 92 "const defaultModel = {", 93 " ID: undefined,", 94 " DemoName: undefined", 95 "}", 96 "", 97 "export default {", 98 " name: \"DemoList\",", 99 " computed: {", 100 " ...mapGetters(['currentUser'])", 101 " },", 102 " data() {", 103 " return {", 104 " // 列表加载遮罩层", 105 " loading: true,", 106 " // 数据提交遮罩层", 107 " loadingsub: false,", 108 " // 导出遮罩层", 109 " exportLoading: false,", 110 " // 选中数组", 111 " ids: [],", 112 " // 非单个禁用", 113 " single: true,", 114 " // 非多个禁用", 115 " multiple: true,", 116 " // 显示搜索条件", 117 " showSearch: true,", 118 " // 总条数", 119 " total: 0,", 120 " // 示例表格数据", 121 " taskList: [],", 122 " // 弹出层标题", 123 " title: \"\",", 124 " // 是否显示弹出层", 125 " open: false,", 126 " // 查询参数", 127 " queryParams: {", 128 " Page: 1,", 129 " PageSize: 10,", 130 " Query: {", 131 " DemoName: undefined", 132 " },", 133 " },", 134 " // 表单参数", 135 " form: Object.assign({}, defaultModel),", 136 " // 表单校验", 137 " rules: {", 138 " DemoName: [{ required: true, message: \"请填写示例名称\", trigger: \"blur\" }]", 139 " }", 140 " };", 141 " },", 142 " created() {", 143 " this.getList();", 144 " },", 145 " methods: {", 146 " /** 查询所有的工作列表 */", 147 " getList() {", 148 " this.loading = true;", 149 " demoApi.listDemo(this.queryParams).then((response) => {", 150 " const { data } = response;", 151 " this.taskList = data.items;", 152 " this.total = data.dataCount;", 153 " this.loading = false;", 154 " });", 155 " },", 156 " // 表单重置", 157 " reset() {", 158 " this.form = Object.assign({}, defaultModel);", 159 " this.resetForm(\"form\");", 160 " },", 161 " // 取消按钮事件", 162 " cancel() {", 163 " this.open = false;", 164 " },", 165 " /** 搜索按钮操作 */", 166 " handleQuery() {", 167 " this.queryParams.Page = 1;", 168 " this.getList();", 169 " },", 170 " /** 重置按钮操作 */", 171 " resetQuery() {", 172 " this.queryParams = {", 173 " Page: 1,", 174 " PageSize: 10,", 175 " Query: {", 176 " DemoName: undefined", 177 " },", 178 " };", 179 " this.handleQuery();", 180 " },", 181 " // 多选框选中数据", 182 " handleSelectionChange(selection) {", 183 " this.ids = selection.map((item) => item.ID);", 184 " this.single = selection.length != 1;", 185 " this.multiple = !selection.length;", 186 " },", 187 " /** 新增按钮操作 */", 188 " handleAdd() {", 189 " this.reset();", 190 " this.open = true;", 191 " this.title = \"添加示例\";", 192 " },", 193 " /** 修改按钮操作 */", 194 " handleUpdate(row) {", 195 " this.reset();", 196 " this.title = \"修改示例\";", 197 " const ID = this.isNull(row.ID)", 198 " ? this.ids", 199 " : row.ID.toString().split(\" \");", 200 " demoApi.getDemoById(ID).then((response) => {", 201 " this.form = Object.assign({}, response.data);", 202 " this.open = true;", 203 " });", 204 " },", 205 " /** 提交按钮 */", 206 " submitForm: function () {", 207 " this.\\$refs[\"form\"].validate((valid) => {", 208 " if (valid) {", 209 " this.loadingsub = true;", 210 " if (this.form.ID != undefined) {", 211 " demoApi.updateDemo(this.form).then((response) => {", 212 " if (response.result) {", 213 " this.open = false;", 214 " this.getList();", 215 " this.msgSuccess(\"修改成功\");", 216 " this.loadingsub = false;", 217 " } else {", 218 " this.loadingsub = true;", 219 " this.msgError(response.msg);", 220 " }", 221 " });", 222 " } else {", 223 " demoApi.addDemo(this.form).then((response) => {", 224 " if (response.result) {", 225 " this.open = false;", 226 " this.getList();", 227 " this.msgSuccess(\"新增成功\");", 228 " this.loadingsub = false;", 229 " } else {", 230 " this.loadingsub = true;", 231 " this.msgError(response.msg);", 232 " }", 233 " });", 234 " }", 235 " }", 236 " });", 237 " },", 238 " /** 删除按钮操作 */", 239 " handleDelete(row) {", 240 " const delIds = this.isNull(row.ID)", 241 " ? this.ids", 242 " : row.ID.toString().split(\" \");", 243 " var infoContent = this.isNull(row.ID) ? '是否确认删除所选示例数据' : '是否确认删除名称为【\"' + row.DemoName + '\"】的数据项?';", 244 " this.\\$confirm(", 245 " infoContent,", 246 " \"警告\",", 247 " {", 248 " confirmButtonText: \"确定\",", 249 " cancelButtonText: \"取消\",", 250 " type: \"warning\",", 251 " }", 252 " )", 253 " .then(function () {", 254 " return demoApi.delDemo(delIds);", 255 " })", 256 " .then((response) => {", 257 " if (response.result) {", 258 " this.msgSuccess(\"删除成功\");", 259 " } else {", 260 " this.msgError(response.msg);", 261 " }", 262 " })", 263 " .then(() => {", 264 " this.getList();", 265 " })", 266 " .catch(() => { });", 267 " },", 268 " /** 导出按钮操作 */", 269 " handleExport() {", 270 " const queryParams = this.queryParams;", 271 " this.\\$confirm(\"是否确认导出所有示例数据项?\", \"提示\", {", 272 " confirmButtonText: \"确定\",", 273 " cancelButtonText: \"取消\",", 274 " type: \"warning\",", 275 " })", 276 " .then(() => {", 277 " this.exportLoading = true;", 278 " return demoApi.exportDemo(queryParams);", 279 " })", 280 " .then((response) => {", 281 " this.download(response.data);", 282 " this.exportLoading = false;", 283 " })", 284 " .catch(() => { this.exportLoading = false; });", 285 " }", 286 " }", 287 "};", 288 "</script>", 289 "<style lang=\"scss\" scoped>\n", 290 "</style>", 291 "$2" 292 ], 293 "description": "生成Vue文件页面代码，包括基础增删改查功能(生成代码后替换关键字Demo即可)" 294 } 295 }
