vsCode创建vue模板
2018-12-07 09:18
429 查看
1.安装vscode
[code]官网地址:https://code.visualstudio.com/
2.安装一个插件,识别vue文件
[code]插件库中搜索Vetur,下图中的第一个,点击安装,安装完成之后点击重新加载
微信图片_20180723174649.png
3.新建代码片段
[code]文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定
4.删除不要的代码
5.粘入自己写的.vue模板
[code]{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div class='$2'>$5</div>", "</template>", "", "<script>", "//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)", "//例如:import 《组件名称》 from '《组件路径》';", "", "export default {", "//import引入的组件需要注入到对象中才能使用", "components: {},", "data() {", "//这里存放数据", "return {", "", "};", "},", "//监听属性 类似于data概念", "computed: {},", "//监控data中的数据变化", "watch: {},", "//方法集合", "methods: {", "", "},", "//生命周期 - 创建完成(可以访问当前this实例)", "created() {", "", "},", "//生命周期 - 挂载完成(可以访问DOM元素)", "mounted() {", "", "},", "beforeCreate() {}, //生命周期 - 创建之前", "beforeMount() {}, //生命周期 - 挂载之前", "beforeUpdate() {}, //生命周期 - 更新之前", "updated() {}, //生命周期 - 更新之后", "beforeDestroy() {}, //生命周期 - 销毁之前", "destroyed() {}, //生命周期 - 销毁完成", "activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发", "}", "</script>", "<style lang='scss' scoped>", "//@import url($3); 引入公共css类", "$4", "</style>" ], "description": "Log output to console" } }
6.上面代码中的 "prefix": "vue", 就是快捷键;保存好之后,新建.vue结尾的文件试试
[code]输入vue 按键盘的tab就行
https://mp.csdn.net/postedit?not_checkout=1
相关文章推荐
- vs code vue模板创建
- 使用vscode创建vue代码片段
- 在VScode中创建你的代码模板
- 在vscode里使用.vue代码模板的方法
- Visual Studio Code (vscode)创建Node.js+Express+handlebars项目——handlebars页面模板
- vscode配置总结可收藏/vscode用户设置大全/vue代码模板
- 使用vscode,根据vue基础模板文件生成代码
- vscode 的 vue模板
- [小tips]使用vscode,根据vue模板文件生成代码
- vscode前端常用插件推荐,搭建JQuery、Vue等开发环境
- vscode创建vue模板,添加自定义snippet(代码段),附详细配置
- webstorm如何创建一个代码模板?以创建vue代码模板为例
- 推荐 VSCode 上特别好用的 Vue 插件 - vetur
- VUE在VSCode中的代码格式化设置
- Visual Studio Code(vscode) 创建Node.js+Express+handlebars项目 --Express概述
- springboot vue编辑器vscode
- vscode使用vue中的v-for提示错误
- 【翻译】在Mac上使用VSCode创建你的第一个Asp.Net Core应用
- <tarjan算法模板> codevs 1332 上白泽慧音
- codevs 1080~1082 线段树练习系列(模板)