uniapp vue2、vue3 页面模板代码块设置

本文分享 uniapp vue2、vue3 页面模板代码块设置

设置路径

HBuilder X -> 工具 -> 代码块设置 -> vue代码块 -> 自定义代码块

如上图操作后在打开的 vue.json 文件的右侧"自定义代码块"中复制如下代码(可全选替换也可添加到代码中)

示例代码

javascript 复制代码
{
	"vue2": {
		"key": "vue2",
		"prefix": "vue2",
		"body": [
			"<template>",
			"\t<view class=\"page\">页面模板</view>",
			"</template>",
			"",
			"<script>",
			"\texport default {",
			"\t\tname: \"Name\",",
			"\t\tdata() {",
			"\t\t\treturn {};",
			"\t\t},",
			"\t\tonLoad() {},",
			"\t\tonShow() {},",
			"\t\tmethods: {}",
			"\t};",
			"</script>",
			"",
			"<style lang=\"scss\" scoped>",
			"",
			"</style>"
		],
		"triggerAssist": true,
		"description": "uniapp vue2 的页面模板"
	},
	"vue3": {
		"key": "vue3",
		"prefix": "vue3",
		"body": [
			"<template>",
			"\t<view class=\"page\">页面模板</view>",
			"</template>",
			"",
			"<script setup>",
			"\timport {",
			"\t\tonLoad",
			"\t} from '@dcloudio/uni-app'",
			"\timport {",
			"\t\tref,",
			"\t\treactive",
			"\t} from 'vue'",
			"\timport {",
			"\t\tstore",
			"\t} from '@/store/index.js'",
			"\tonLoad(() => {})",
			"</script>",
			"",
			"<style lang=\"scss\" scoped>",
			"",
			"</style>"
		],
		"triggerAssist": true,
		"description": "uniapp vue3 的页面模板"
	}
	
}

效果示例

在 .vue 页面中输入 vue 即可触发代码块快捷选择此时可选择配置好的 vue2 或者 vue3 的代码块

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
shengmeshi9 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu9 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss