如果你是使用 Vue.js的新手,本指南将帮助你掌握一些基本内容。
- 试用 Vue.js HelloWorld 代码沙盒
- 尝试在 Visual Studio Code 中使用 Node.js
先决条件
- 必须先在 Windows 或 适用于 Linux 的 Windows 子系统上安装 Vue.js。
通过 Visual Studio Code 试用 NodeJS
如果尚未安装,安装 VS Code。 建议在 Windows 上安装 VS Code,不管你打算在 Windows 还是 WSL 上使用 Vue。
打开命令行并创建新目录:
mkdir HelloVue
然后输入目录:cd HelloVue
安装 Vue CLI:
npm install -g @vue/cli
创建 Vue 应用:
vue create hello-vue-app
需要选择是使用 Vue 2 还是 Vue 3 预览版,还是手动选择所需的功能。
打开新 hello-vue-app 的目录:
cd hello-vue-app
尝试在 Web 浏览器中运行新的 Vue 应用:
npm run serve
浏览器中应会显示“欢迎使用 Vue.js 应用”。http://localhost:8080 可以按
Ctrl+C
以停止 vue-cli-service 服务器。注释
如果在本教程中使用 WSL(与 Ubuntu 或你最喜欢的 Linux 发行版),则需要确保已安装 Remote - WSL 扩展,以便在 VS 远程服务器上运行和编辑代码时获得最佳体验。
尝试通过在 VS Code 中打开 Vue 应用的源代码来更新欢迎消息,请输入:
code .
VS Code 将在文件资源管理器中启动并显示 Vue 应用程序。 通过
npm run serve
在终端中再次运行应用,并将 Web 浏览器打开到 localhost,以便可以看到显示的 Vue 欢迎页。 在 VS Code 中查找App.vue
文件。 尝试将“欢迎使用 Vue.js 应用”更改为“欢迎来到丛林!” 保存更改后,您将会看到您的 Vue 应用进行“热重载”。
其他资源
在 Visual Studio Code 中使用 Vue:查找有关将 Vue 与 VS Code 配合使用的详细信息,包括提供 Vue 语法突出显示、IntelliSense、调试支持等的 Vetur 扩展。
使用 Vue.js 学习路径执行第一步