开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术-抽取代码片段 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11305
前端技术-抽取代码片段
抽取 vue 的代码片段
文件=>首选项=>用户代码片段=>新建全局代码片段/或文件夹代码片段: vue-html.code-snippets
注意:
制作代码片段的时候,字符串中如果包含文件中复制过来的"Tab"键的空格。要换成"空格键"的空格。
1.代码片段的创建
{
//Place your global snippets here. Each snippet is defined under a snippet name and ha
//description. Add comma separated ids of the languages where the snippet is applicab]
//is left empty or omitted, the snippet gets applied to all languages. The prefix is
//used to trigger the snippet and the body will be expanded and inserted. Possible var
//$1, $2 for tab stops, $0 for the final cursor position, and ${1: label},${2:another}
//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"
// }
}
以上片段文件没有模板东西,所以将其替换
"pretix" : "vuehtml",
"body" : [
"<!DOCTYPE html>",
"<html lang= \"en\">",
" ",
"<head>",
" <meta charset = \"UTF-8\" >",
" <meta name= \"viewport\" content= \"width = device-width, initial-scale= 1.0\" >
" <meta http-equiv= \"X-UA-Compatible\" content= \"ie=edge\" >,
" <title>Document</title>
"</head>",
" ",
"<body>",
" <div id= \"app\">",
" ",
" </div>",
" <script src= \"vue.min.js\"></script>",
" <script>",
" new Vue({ ",
" el: '#app' , ",
" data: { ",
" $1",
" }
" })
" </script>",
"</body>",
" ",
"</html>",
],
"description": "my vue template in html"
}
2.测试代码片段(直接输入快捷键 vue html)
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset = "UTF-8" >
<meta name= "viewport" content= "width = device-width, initial-scale= 1.0" >
<meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
<title>Document</title>
</head>
<body>
<div id= "app">
</div>
<script src= "vue.min.js"></script>
<script>
new Vue({
el: '#app' ,
data: {
})
</script>
</body>
</html>
