背景
“工欲善其事必先利其器“,走进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样式部分。
- 下面给大家一个例子,这样看着更直观: