脚本宝典收集整理的这篇文章主要介绍了

vscode 创建vue模板

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>(确保编辑器已经安装了插件 vetur、vueHelper)<br />1、ctrl+shift+p 输入snippets 选中它 输入vue》vue.json <br />2、或者操作 文件》首选项》用户代码片段》vue》vue.json</p> <p><span class="img-wrap"><img data-src="/img/bVbprBl" src="/img/bVbprBl" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <p>复制如下 也可自由编辑</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="{ &quot;Print to console&quot;: { &quot;prefix&quot;: &quot;vue&quot;, &quot;body&quot;: [ &quot;<!-- $1 -->&quot;,<br /> &quot;<template>&quot;,<br /> &quot;</p> <div class='$2'>$5</div> <p>&quot;,<br /> &quot;</template>&quot;,<br /> &quot;&quot;,<br /> &quot;<script>&quot;, &quot;&quot;, &quot;// 导入的其他文件 例如:import moduleName from 'modulePath';&quot;, &quot;&quot;, &quot;<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default {&quot;, &quot;&quot;, &quot;//import所引入的组件注册&quot;, &quot;components: {&quot;, &quot;&quot;, &quot;},&quot;, &quot;&quot;, &quot;data() {&quot;, &quot; return {&quot;, &quot;&quot;, &quot; };&quot;, &quot;},&quot;, &quot;&quot;, &quot;//监听属性&quot;, &quot;computed: {&quot;, &quot;&quot;, &quot;},&quot;, &quot;&quot;, &quot;//监控data中的数据变化&quot;, &quot;watch: {&quot;, &quot;&quot;, &quot;},&quot;, &quot;&quot;, &quot;//方法集合&quot;, &quot;methods: {&quot;, &quot;&quot;, &quot;},&quot;, &quot;&quot;, &quot;//生命周期 - 组件实例刚被创建&quot;, &quot;beforeCreate() { &quot;, &quot;&quot;, &quot;},&quot;,</p> <p> &quot;//创建完成 访问当前<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>实例&quot;, &quot;created() {&quot;, &quot;&quot;, &quot;},&quot;, &quot;//挂载之前&quot;, &quot;beforeMount() { &quot;, &quot;&quot;, &quot;},&quot;,</p> <p> &quot;//挂载完成 访问<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>元素&quot;, &quot;mounted() {&quot;, &quot;&quot;, &quot;},&quot;,</p> <p> &quot;//更新之前&quot;, &quot;beforeUpdate() { &quot;, &quot;&quot;, &quot;},&quot;,</p> <p> &quot;//更新之后&quot;, &quot;updated() { &quot;, &quot;&quot;, &quot;},&quot;,</p> <p> &quot;//for keep-alive 缓存功能,组件被激活时调用&quot;, &quot;activated() {&quot;, &quot;&quot;, &quot;},&quot;,</p> <p> &quot;//for keep-alive 组件被移除时调用&quot;, &quot;deactivated() {&quot;, &quot;&quot;, &quot;},&quot;,</p> <p> &quot;//组件销毁之前调用&quot;, &quot;beforeDestroy() {&quot;, &quot;&quot;, &quot;},&quot;,</p> <p> &quot;//组件销毁之后调用&quot;, &quot;destroyed() {&quot;, &quot;&quot;, &quot;},&quot;,</p> <p> &quot;}&quot;, &quot;</script>&quot;,<br /> &quot;</p> <style lang='scss' scoped>&quot;, &quot;//@import url($3); 引入公共css类&quot;, &quot;$4&quot;, &quot;</style> <p>&quot;<br /> ],<br /> &quot;description&quot;: &quot;Log output to console&quot;<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>{ <span class="hljs-attr">"Print to console"</span>: { <span class="hljs-attr">"prefix"</span>: <span class="hljs-string">"vue"</span>, <span class="hljs-attr">"body"</span>: [ <span class="hljs-string">"&lt;!-- $1 --&gt;"</span>, <span class="hljs-string">"&lt;template&gt;"</span>, <span class="hljs-string">"&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> class='$2'&gt;$5&lt;/div&gt;"</span>, <span class="hljs-string">"&lt;/template&gt;"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"&lt;script&gt;"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"// 导入的其他文件 例如:import moduleName from 'modulePath';"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a> default {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"//import所引入的组件注册"</span>, <span class="hljs-string">"components: {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"data() {"</span>, <span class="hljs-string">" return {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">" };"</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"//监听属性"</span>, <span class="hljs-string">"computed: {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"//监控data中的数据变化"</span>, <span class="hljs-string">"watch: {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"//方法集合"</span>, <span class="hljs-string">"methods: {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"//生命周期 - 组件实例刚被创建"</span>, <span class="hljs-string">"beforeCreate() { "</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">"//创建完成 访问当前<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>实例"</span>, <span class="hljs-string">"created() {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">"//挂载之前"</span>, <span class="hljs-string">"beforeMount() { "</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">"//挂载完成 访问<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>元素"</span>, <span class="hljs-string">"mounted() {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">"//更新之前"</span>, <span class="hljs-string">"beforeUpdate() { "</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">"//更新之后"</span>, <span class="hljs-string">"updated() { "</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">"//for keep-alive 缓存功能,组件被激活时调用"</span>, <span class="hljs-string">"activated() {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">"//for keep-alive 组件被移除时调用"</span>, <span class="hljs-string">"deactivated() {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">"//组件销毁之前调用"</span>, <span class="hljs-string">"beforeDestroy() {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">"//组件销毁之后调用"</span>, <span class="hljs-string">"destroyed() {"</span>, <span class="hljs-string">""</span>, <span class="hljs-string">"},"</span>, <span class="hljs-string">"}"</span>, <span class="hljs-string">"&lt;/script&gt;"</span>, <span class="hljs-string">"&lt;style lang='scss' scoped&gt;"</span>, <span class="hljs-string">"//@import url($3); 引入公共css类"</span>, <span class="hljs-string">"$4"</span>, <span class="hljs-string">"&lt;/style&gt;"</span> ], <span class="hljs-attr">"description"</span>: <span class="hljs-string">"Log output to console"</span> } }</code></pre> <p>最后 :保存 然后新建 .vue文件 ,如果新建的页面啥都没有 在这个页面输入 vue 回车 OK</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vscode 创建vue模板

全部内容,希望文章能够帮你解决

vscode 创建vue模板

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过