idea vue 调试_带你快速搭建Vue前端项目前置篇

点击上方 java项目学习 ，选择 星标 公众号

重磅资讯、干货，第一时间送达

前言：在过去的十年里，我们的网页变得更加动态化和强大了，通过JavaScript，我们已经把很多传统的服务器端代码放入到浏览器中。

这就导致浏览器中产生了成千上万行的JavaScript代码，它们连接了各式各样的HTML和CSS文件，但缺乏正规的组织形式。

这也是为什么越来越多的开发者使用JavaScript框架，诸如Angular、React或Vue。下面我们对Vue进行介绍。

1  Vue 简介

• Approachable---友好
• Versatile---多用途
• Performant---高性能
• Maintainable---可维护
• Testable---可测试

Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮你创建可维护性和可测试性更强的代码库。同时它也是渐进式Javascript框架，也就是说，如果你已经有一个现成的服务端应用，你可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者你希望将更多业务逻辑放到前端来实现，那么Vue的核心库及生态系统，也可以满足你的各式需求。

和其他前端框架一样，Vue允许你将一个前端网页分割成可复用的组件，每个组件都包含属于自己的Html、JavaScript和Css来渲染网页中相应的地方。

接下来，就让我们亲自动手构建一个简单的页面，向小明同学表白吧。

2 前期准备

2.1 软件准备

可以使用IDEA或Webstorm作为开发软件，这里我们使用的是Webstorm。安装包可以从官网下载，官网地址为：https://www.jetbrains.com/webstorm/download/#section=windows。打开网站后，我们看到如图所示页面，点击Download按钮，即可下载最新版安装包。您也可以在公共号向后台发送"webstorm"直接获取软件安装包。

2.2 软件安装

双击webstorm.exe开始安装，安装过程按提示操作即可，安装结束后，即可试用。

2.3 环境准备

1、打开电脑，在D盘新建一个Hello文件夹，作为我们的工程文件夹;
2、在Hello文件夹下，新建一个js文件夹，用来存放vue.js文件；
3、打开Vue官网(https://cn.vuejs.org/v2/guide/installation.html)配置开发环境。如图所示，我们选择开发版本，下载vue.js文件，保存在新建的js文件夹下。4、打开webstorm软件，选中File菜单栏下的Open选项，打开项目文件夹Hello，点击OK即可。5、接下来我们新建一个Html文件，点击File菜单栏下的New，选中HTML File。会弹出下面的对话框，输入我们想要自定义的文件名字，这里我们输入index，点击HTML 5 file,我们的Html文件就创建好了。接下来就可以开始我们的表白之旅啦！

3 开始表白

3.1 书写html页面

我们只要在标签中加入我们的代码，一个简易的Vue代码就完成了。

3.2 浏览器打开

1、我们可以直接在D盘中打开Hello文件夹，也可以在Webstorm中鼠标选中Hello文件夹，右键选中Show in Explorer就可以直接定位到Hello文件夹所在的位置。2、右键选中我们编辑后的Html文件，用浏览器打开即可。

3、下面我们来看一看效果。

3.3 调试

打开F12，选择控制台，输入app.classmate后按回车，我们发现控制台中就出现了小明同学的名字啦，假如这时候又爱上了小红同学，我们能否通过控制台向小红同学表白呢？答案是肯定的！只要将小红同学的名字给app.classmate重新赋值就可以了。如图所示，页面上表白的对象就变成小红了。

可以看出，我们可以通过控制台可以更改页面上的显示内容。这是因为Vue是响应式的，也就是说当我们的数据更新时，Vue会更新到网页上所有用到该数据的地方，除了字符串，Vue对其他数据类型，也是如此哦，是不是很有意思呢？你学会了吗？

您可以在后台回复"表白"获取代码。

点个在看

你最好看