vscode/webstorm自定义vue模板
vscode/webstorm自定义vue模板
流眸
发布于 2020-06-02 08:05:19
发布于 2020-06-02 08:05:19
代码可运行
运行总次数：0
代码可运行
引导语
在进行vue项目时，我们需要对编译器进一步配置来支持vue文件以及相关模板语法的高亮显示等。本文列出关于webstorm和vscode两种常用编译器的模板语法配置。
webstorm
1. 打开设置
打开设置： File=>Settings
2. 安装vue插件
在搜索区输入 plugins，或者找到plugins选项，右边的 Marketplace搜索 vue，安装。
3. 自定义模板
有时候我们新建vue文件时默认的模板不是我们想要的，这时可以自定义模板： 还是在设置中，搜索框输入 fileandcodetemplate或者在设置中找到该选项也行，在右侧选择vue模板，然后在编辑区修改模板即可。如图
4. 参考
给出一份我自己的作为参考，可按自己常用规则优化修改。 其中， ${COMPONENT_NAME}直接获取组件名。
<template>
<div>
</div>
</template>
<script>
export default {
name: "${COMPONENT_NAME}",
props: [],
components: {
},
data () {
return {
}
},
methods: {
},
mounted () {
}
}
</script>
<style type="text/scss" lang="scss" scoped>
</style>
vscode
1. 安装Vetur
在应用市场中安装 Vetur
2. 使用
此时，在vue项目中新建 .vue文件，然后输入 vue时，按 tab键则会出来一份默认的模板。由于默认模板涵盖内容过少，因此我们仍需要对齐进行自定义模板配置。
3. 自定义模板
- 打开
文件=>首选项=>用户片段 - 搜索关键词
vue - 在候选列表中选择
vue.json - 在打开的文件中自定义配置即可
如果没有找到 vue.json，可以重启一下vscode试一下。
4. 参考
给出一份参考
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" props: {\n",
" },",
" components: {\n",
" },",
" data() {",
" return {\n",
" };",
" },",
" watch: {\n",
" },",
" methods: {\n",
" },",
" mounted() {\n",
" },",
"};",
"</script>\n",
"<style scoped lang=\"${1:scss}\" type=\"text/scss\">\n",
"</style>\n",
],
"description": "Create vue template"
}
}
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-05-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
![54·[Vue项目]旺财记账-记账页面功能](https://ask.qcloudimg.com/http-save/yehe-7532292/1ef28108e577f1d73c62cf86193634b8.jpg)
推荐阅读
相关推荐
VUE项目iconfont自定义SVG（非SVG文件）-_PUSDN
更多 >
腾讯云开发者
