使用webstorm玩转Vue2

刘羽冲

虽然尤雨溪一直偏爱sublime,但对于webstorm深度使用者来说,可以通过合理的配置,将webstorm的特性发挥到极致。

1. perferences里面找到File and Templates 配置。

位置在File => Perfernces => Editor => File and Code Templates

clipboard.png

2. 点击左上角的“+”号,创建新的模板

clipboard.png

name处输入Vue2 File, extension选择vue,下方空白文本框填入你的vue2文件配置。

那么,vue2文件如何配置,最能加速我们的码字效率呢?

clipboard.png

3. 拷贝以下代码到文本框内

<template>
  <div>
  
  Component: ${NAME}
  
  </div>
</template>

<style scoped></style>

<script>
export default{
name: '${NAME}',

data () {
  return {}
},

props: {},

components:{},

mounted () {
  this.\$nextTick(()=>{
  })
},

watch:{
},

computed:{
},

filters:{},

methods:{
}
}
</script>

点击OK,webpack插件模板就可以使用了。

这样只要你创建Vue2 File就会直接生成一个功能划分好的component啦!

如何使用模板?

在项目过程中,.vue文件一般都是作为component而存在的(比如用vue-cli创建的项目),直接创建新的.vue文件,就可以看到效果啦!

比如在Component下创建一个组件Home

clipboard.png

然后在router => index.js中引入组件

clipboard.png

查看到效果
clipboard.png

阅读 5.9k

node.js优雅之道
Design Elegance, Code Elegance, Enjoy Elegance.

破庙中神易,破心中神难。 当人类第一次仰望天空的时候,就已经有罪!

4.1k 声望
924 粉丝
0 条评论

破庙中神易,破心中神难。 当人类第一次仰望天空的时候,就已经有罪!

4.1k 声望
924 粉丝
文章目录
宣传栏