背景
“工欲善其事必先利其器“，走进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样式、配套的类库。
