一、在官方下载并安装【VSCode】
官方下载:Visual Studio Code
二、打开【VSCode】,下载方便【Vue】开发的插件
![](https://img.haomeiwen.com/i22865226/99d1feed2d8593fd.png)
三、代码片段抽取
1. 抽取vue中的代码片段
![](https://img.haomeiwen.com/i22865226/7e0201c77e7df267.png)
![](https://img.haomeiwen.com/i22865226/acbcb3f74da00a85.png)
![](https://img.haomeiwen.com/i22865226/349fa379236849a7.png)
![](https://img.haomeiwen.com/i22865226/826eca076482f4e1.png)
{
"vue htm": {
"scope": "html",
"prefix": "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"
}
}
![](https://img.haomeiwen.com/i22865226/8a5f49a657462951.png)
![](https://img.haomeiwen.com/i22865226/9efef262b8f2d2e1.png)
![](https://img.haomeiwen.com/i22865226/5e54721379cbf6d6.png)
网友评论