背景

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

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

手把手学习Vue3.0：CSS样式基础和HTML5基础收藏
背景最近在做管理系统的时候我还不会用Vue,时间紧任务重就先用J2EE那套,利用layUI先实现了.现在从头学习前后端分离技术来搞,在做的过程中对CSS和HTML5的基础语法都已经全忘了,正好总结一 ...
学习Vue3.0，先从搭建环境开始
Bug源测试,上线来几个.愿君多修改,今夜眼难合. 这是小编关于Vue3.0系列文章的第二篇,本文将带您从零搭建一个基于Vue3.0与vite的Vue3.0开发环境,通过本文的学习,你将学习到以下内容 ...
黄聪：AngularJS最理想开发工具WebStorm
Aug 29, 2013 Tags: angularangular.jsangularjswebstorm Comments: 23 Comments AngularJS最理想开发工具WebStorm ...
JavaScript开发工具WebStorm教程
WebStorm是一款优秀的Javascript IDE,下面是WebStorm的用户界面和使用教程. 当用户第一次运行WebStorm或者没有打开项目,在WebStorm显示的欢迎屏幕上,可以快速访 ...
From 《visual C++ 6.0开发工具与调试》
From <visual C++ 6.0开发工具与调试> 1. 如何快速地规范代码缩进格式选中所需要规范的代码,按shift+F8 2. 如何在Rel ...
【红隼书签】用Vue3.0 开发一款导入浏览器书签的在线书签
用Vue3.0 开发一款导入浏览器书签的在线书签
CC2640R2F BLE5.0 开发工具集
CC2640R2BLE5.0开发工具集对于CC2640开发的全部工具集,我们建议直接从官方下载,因为整个TI Simplelink工具集更新频率特别快,一定程度上的更新会导致向上不兼容或者功能性的差 ...
JavaScript开发工具WebStorm使用教程：WebStorm项目
无论在WebStorm 中做什么,都是在项目的上下文中执行的.WebStorm 中的项目是一个文件夹,其中包含您编辑的源代码.您使用的库和工具(例如,在node_modules子文件夹中)以及各种应用 ...
wince6.0开发工具的安装
windows embedded CE6.0开发工具的安装和windows embedded CE5.0不同,windows embedded CE6.0的开发工具更为统一,操作系统定制和应用程序的 ...
学习Vue3.0,先来了解一下Proxy
产品经理身旁过,需求变更逃不过. 测试姐姐眯眼笑,今晚bug必然多. 据悉Vue3.0的正式版将要在本月(8月)发布,从发布到正式投入到正式项目中,还需要一定的过渡期,但我们不能一直等到Vue3正式投 ...

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

背景

IDE工具安装

Vue文件内容介绍

总结

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

最新文章

热门文章