# 1.使用 Vue.js 的 Hello World
> 原文： [https://javabeginnerstutorial.com/js/vue-js/1-hello-world-with-vue-js/](https://javabeginnerstutorial.com/js/vue-js/1-hello-world-with-vue-js/)
嗨，摇滚明星（音乐不包括在内）！ 激动地进入 Vue.js 世界？ 那我们还等什么呢？
*好消息*：入门 Vue 很简单。
今天让我们保持**目标**非常简单。 遵循古老的传统，让我们旨在使用 Vue 在我们的网页上显示消息“`Hello World`”。
## 环境设置
由于我们已决定使一切保持简单，因此为什么不使用 **CDN**，它基本上是从另一台服务器导入 Vue.js 的。 在本教程系列的后面，我们将使用 Vue CLI 和 Webpack 进行更复杂的设置来捆绑所有文件。 但是就目前而言，为了练习，理解和学习 Vue 的基础知识，CDN 会做。 是的，您也可以将这种简单的设置用于非常小的项目。
### 选项 1：
```java
```
### 选项 2：
Vue 也可用于 unpkg，
```java
```
在撰写本文时，最新的版本是 2.5.16。 建议在 URL 中包含特定的版本号。 您可以手动将版本编辑为使用中的最新版本。
但是，如果您不想提及该版本并使用最新版本，请继续，
```java
```
### 选项 3：
您可以[将 Vue.js 的开发或生产版本](https://vuejs.org/v2/guide/installation.html)下载到本地，并使用 HTML 文件中的`script`标签直接将其包含在内。
**注意**：开发版本包含控制台警告，这些警告对于调试非常有用。 而生产版本主要针对大小（通过使用 vue.js 文件的缩小版本等）和速度进行了优化，这对于在实时环境中发布非常重要。
## 初始代码
我使用 Visual Studio Code 作为 IDE。 您可以使用 Sublime Text，WebStorm，Atom，Notepad ++或您选择的任何其他 IDE。 **我的建议？** 请选择 [**JS Fiddle**](https://jsfiddle.net/) 标签。 这仅仅是锦上添花。 最好的部分是，您可以在一个屏幕上查看 HTML，CSS，JS 和输出。 与必须每次刷新一次以反映更改的浏览器不同，JS 小提琴会检测到更改并在“结果”窗格中自动呈现输出。
使用以下代码创建一个 HTML 文件“`index.html`”，
```java
Hello Vue!
Hello World!
```
代码很简单。 我们给页面命名为“`Hello Vue!`”。 以及``部分中使用带有`