教程:初学者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

    浏览器中应会显示“欢迎使用 Vue.js 应用”。http://localhost:8080 可以按 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 应用”更改为“欢迎来到丛林!” 保存更改后,您将会看到您的 Vue 应用进行“热重载”。

    Vue 应用热更新和更改动图

其他资源