前言
每次写vue,都要先手动把骨架敲出来,很费时间,可以利用vscode的“用户代码片段”,建立vue模板,后续直接调用。
实现步骤
1、点击vscode左下角管理处的“用户代码片段”
2、新建代码片段
在弹出框中输入 vue.json新建一个代码片段(文件可根据自己的习惯来命名)
3、编辑代码片段的详细样式
初始文件中有一堆注释,删掉即可,把我们设置的代码片段粘贴进去
代码里面涉及到的路径,要根据自己实际情况做修改
{
"Print to Vue&html base code": {
"prefix": "vh",
"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>",
" <!-- 导入 vue 文件 -->",
" <script src=\"./lib/vue.js\"></script>",
"</head>",
"",
"<body>",
" <!-- 被 vm 实例所控制的区域 -->",
" <div id=\"app\">",
"",
" </div>",
"",
" <script>",
" // 创建 vm 实例对象",
" const vm = new Vue({",
" // 指定控制的区域",
" el: '#app',",
" data: {",
"",
" },",
" methods: {",
"",
" }",
" });",
" </script>",
"</body>",
"",
"</html>",
],
"description": "Vue&html base code"
}
}
4、保存文件
使用方式
1、新建一个HTML文件
2、输入vh
3、回车,生成代码
<!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>
<!-- 导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
</div>
<script>
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {
},
methods: {
}
});
</script>
</body>
</html>
成功!!
如果有其它想生成的代码段,方法同上