vue[初级] WebStorm中开发VUE的HelloWorld项目

本节内容

WebStorm中开发VUE的HelloWorld项目

上一节讲到了使用vue-cli在本地构建vue项目并在webstorm中引入且正常运行。

本节主要是在webstorm中开发vue的入门程序 - HelloWorld

1. 删除src/App.vue,src/components/HelloWorld.vue,src/main.js

2. 新建src/components/HelloWorld.vue

HelloWorld.vue文件是用来对需求进行展示的

– 在HelloWorld.vue中会存在三个节点 分别是template,script,style

• template 用来编写html页面内容的，需要注意的是 只能出现一个根节点 不能出现平级的根节点 可以嵌套 但不能平级
• script 用来将当前页面封装成组件并导出，在script中还可以定义当前页面中需要的数据（* 数据需要使用方法data(){return{…}} 且在定义数据时使用return方式返回数据， 不能使用data:{}）
• style 是用来定义当前页面中的样式表，需要添加scoped属性
  – scoped属性 表示只在当前文件中有效 对外层其它文件无效

<template>
<div>
<p class=