vscode快速生成vue骨架

Y_soybean_milk

已于 2022-04-20 15:36:35 修改

阅读量5.6k

点赞数 2

分类专栏：前端学习

于 2021-05-28 11:12:04 首次发布

本文链接：https://blog.csdn.net/Y_soybean_milk/article/details/117355365

版权

vue 前端 json

前端学习专栏收录该内容

22 篇文章 4 订阅

订阅专栏

前言

每次写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>

成功！！

如果有其它想生成的代码段，方法同上

Y_soybean_milk

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
vscode快速生成vue骨架

前言每次写vue，都要先手动把骨架敲出来，很费时间，可以利用vscode的“用户代码片段”，建立vue模板，后续直接调用。实现步骤1、点击vscode左下角管理处的“用户代码片段”2、新建代码片段在弹出框中输入 vue.json新建一个代码片段（文件可根据自己的习惯来命名）3、编辑代码片段的详细样式初始文件中有一堆注释，删掉即可，把我们设置的代码片段粘贴进去代码里面涉及到的路径，要根据自己实际情况做修改{ "Print to Vue&html ba
复制链接

扫一扫

专栏目录