教程:Vue.js(初学者)

如果你不熟悉如何使用 Vue.js,本指南介绍了一些基础知识,可帮助你入门。

必备条件

在 Visual Studio Code 中试用 NodeJS

安装 VS Code(如果尚未安装)。 我们建议在 Windows 上安装 VS Code,无论你计划在 Windows 还是在 WSL 上使用 Vue。

  1. 打开命令行并创建新目录 (mkdir HelloVue),然后输入目录 (cd HelloVue)

  2. 安装 Vue CLI:npm install -g @vue/cli

  3. 创建 Vue 应用:vue create hello-vue-app

    你需要选择是使用 Vue 2 还是 Vue 3(预览),或者手动选择所需功能。

    Vue CLI 预设

  4. 打开新的 hello-vue-app 的目录:cd hello-vue-app

  5. 尝试在 Web 浏览器中运行新的 Vue 应用:npm run serve

    你应该会浏览器中的 http://localhost:8080 上看到“欢迎使用 Vue.js 应用”。 可以按 Ctrl+C 停止 vue-cli-service 服务器。

    注意

    如果在本教程中使用 WSL(包括 Ubuntu 或你最喜欢的 Linux 分发版),则需要确保已安装 Remote-WSL 扩展,以获得使用 VS 远程服务器运行和编辑代码的最佳体验。

  6. 尝试通过在 VS Code 中打开 Vue 应用的源代码来更新欢迎消息,输入 code .

  7. VS Code 将在文件资源管理器中启动并显示 Vue 应用程序。 通过 npm run serve 在终端中再次运行应用,并将 Web 浏览器打开到 localhost,以便可以看到显示的 Vue 欢迎页。 在 VS Code 中找到 App.vue 文件。 尝试将“欢迎使用 Vue.js 应用”更改为“欢迎使用 Jungle!”。 保存更改后,你将看到 Vue 应用进行热重载。

    更改时 Vue 应用热重载的动画 gif

其他资源