提示：本文全长1400字左右，完整阅读大约需要花费5分钟。
文章目录
- 前言
- 一、编程工具
- 二、使用步骤
- 1.安装VSCode
- 2.VSCode打开项目
- 3. 删除默认代码
- 4.编写Hello World
- 总结
前言
上一篇文章带大家了解了 Vue 的环境安装，以及如何去创建一个 Vue 项目。
这篇文章就让我们开始愉快的写 hello world 吧。
一、编程工具
这里我是用的是VSCode（全称：Visual Studio Code），是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。访问Visual Studio Code 官网以了解更多。
二、使用步骤
1.安装VSCode
你可以在 VSCode 官网首页下载对应系统（支持Windows、Linux、macOS）的软件，也可以在别的应用商店等地方下载安装包（这里博主推荐大家可以的话都在官网进行下载，如下图所示）。至于安装步骤也是傻瓜式操作，没什么好写的，如果需要安装步骤的可以自行百度教程。
2.VSCode打开项目
这里可以直接将昨天的 Vue 项目文件夹拖到 VSCode 中打开，也可以在 VSCode 里面选择你昨天创建的项目文件夹打开，方法很多就不一一列举了。打开后界面如下图所示：
左边的部分是项目结构（为了更直观的展示，我这里把每个目录都展开显示了），右边的启动欢迎页。
3. 删除默认代码
点开 components 文件夹下的 HelloWorld.vue 文件，点开后里面有 Vue 项目默认的代码，全选后删除就行了，如下图所示：
删除完成后，在键盘上敲一个 <，根据弹出的提示选择第一个，这样就能够自动生成一个 Vue 项目模板。如下图所示：
注意：如果你按下
<后，没有代码提示，可以参考我之前的文章 VSCode中写Vue没有代码提示的解决办法
4.编写Hello World
明确需求：
在页面上显示一个带有红色背景的div，中间有Vue图标，Hello World，以及一个按钮。
代码实现：
<template>
<div>
<h1>Hello Wolrd!</h1>
<button @click="welcome()">欢迎</button>
</div>
</template>
<script>
export default {
methods: {
welcome() {
alert('这是你的第一个Vue项目')
}
}
}
</script>
<style>
div {
background-color: red;
}
</style>运行步骤：
写完按 Ctrl + S 保存代码后，通过 Ctrl + ~ 组合键调出VSCode的终端，然后在下面的命令行输入 npm run serve 。等待打包完成后，按住 Ctrl + 链接 可快速打开浏览器进行查看，也可把地址复制后到浏览器中打开。如下图所示：
效果展示：
然后点击中间的“欢迎”按钮会有提示弹出，如下图所示：
至此，一个简单的Hello World就完成啦。
总结
以上就是今天要讲的内容，本文仅仅简单介绍了Vue的使用，虽然只是小试牛刀，但是我相信热爱可抵岁月漫长，在你不断地学习下，终有一天也可以成为大神。
