手把手学习Vue3.0：开发工具WebStorm和Vue模板文件介绍

背景

“工欲善其事必先利其器“，走进Vue开发之旅，必须依赖一个趁手的IDE。之前用文本编辑器秀代码的时代过去了，推荐大家使用WebStorm。低版本的WebStorm内嵌没有Vue的文件生成模板，需要手动添加。最新版已经自带模板了，直接新建即可。

IDE工具安装

• WebStorm工具安装，一路next到底即可。
• WebStorm可以根据自己习惯做一些设置。
• WebStorm不需要特殊配置什么，利用vue-cli脚手架生成的项目直接打开就可以开发。

Vue文件内容介绍

<template>
  
</template>

<script>
export default {
} 
</script>

<style scoped>
</style>

• 整体分三个部分
• template部分：HTML、组件、标签等页面元素写在这
• script部分：脚本区域，vue的组件引用、外部js引用，变量定义都写在这里
• style部分：是CSS样式部分。
• 下面给大家一个例子，这样看着更直观：

总结

• 弄明白vue文件组成部分的含义，我们就可以按自己的想法，随心所欲的开始写自己的程序。
• Vue本身向下透明了DOM操作，从业务的角度看，前端同学使用频次较高的是CSS样式、配套的类库。