vscode如何快速搭建vue模板?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

相关推荐:《vscode基础教程》、《vue.js教程》
文件 -> 首选项 -> 用户代码片段
搜索vue
vue2.x添加下方代码
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
" <p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/xiazai/code/8919">
<img src="https://img.php.cn/upload/webcode/000/000/020/175722660892435.jpg" alt="爱克网络企业网站建设系统 No.090730">
</a>
<div class="aritcle_card_info">
<a href="/xiazai/code/8919">爱克网络企业网站建设系统 No.090730</a>
<p>系统特点:功能简洁实用。目前互联网上最简洁的企业网站建设系统!原创程序代码。非网络一般下载后修改的代码。更安全。速度快!界面模版分离。原创的分离思路,完全不同于其他方式,不一样的简单感受!搜索引擎优化。做了基础的seo优化。对搜索引擎更友好系统功能关于我们:介绍企业介绍类信息,可自由添加多个介绍栏目!资讯中心:公司或行业资讯类内容展示。可自由添加多个资讯内容!产品展示:支持类别设置,可添加产品图片</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="爱克网络企业网站建设系统 No.090730">
<span>0</span>
</div>
</div>
<a href="/xiazai/code/8919" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="爱克网络企业网站建设系统 No.090730">
</a>
</div>
",
"</template>",
"",
"<script>",
"export default {",
" data () {",
" return {",
" };",
" },",
"",
" components: {},",
"",
" computed: {},",
"",
" mounted: {},",
"",
" methods: {}",
"}",
"",
"</script>",
"<style lang='scss' scoped>",
"</style>"
],
"description": "Log output to console"
}
}vue3.x添加下方代码
{
"Print to console": {
"prefix": "vue3",
"body": [
"<!-- $0 -->",
"<template>",
" <p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p>",
"</template>",
"",
"<script>",
"import { computed, reactive, ref, watch, onMounted,onUpdate,onUnmounted} from 'vue';",
"export default {",
"setup(){",
"//类mounted",
"onMounted(()=>{",
"",
"})",
"//相当于updated",
"onUpdate(()=>{",
"",
"})",
"//相当于destroyen",
"onUnmounted(()=>{",
"",
"})",
"return {}",
"}",
"}",
"",
"</script>",
"<style lang='scss' scoped>",
"</style>"
],
"description": "Log output to console"
}
}新建.vue文件后

相关推荐:
更多编程相关知识,请访问:编程入门!!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号