3分钟

任务 1 搭建环境

任务目的

搭建使用 Vue.js 编写登录界面的环境。想要使用 Vue.js 编写登录页面,需要先搭建好开发环境。本示例采用 VS code 作为编辑器编写相关代码,需要安装 Node.js 以便使用 npm 包管理器,安装 Vue CLI 用于快速搭建 Vue 项目。

任务步骤

1.安装 VS code

打开本机的浏览器,前往VS code 官网。点击【Download for Windows】将安装包下载到本机。

VS code下载页面

下载完成后在本机找到安装包,双击安装包开始安装 VS code。安装过程中保持默认选项,等待软件安装完成。

2.安装 Node.js

打开本机的浏览器,前往Node.js 官网。点击【12.14.1 长期支持版】按钮下载 Node.js 安装包到本机。

Node.js下载页面

下载完成后在本机找到安装包,双击安装包开始安装 Node.js。安装过程中保持默认选项,等待安装完成后打开本机的 cmd 窗口,执行以下命令确认 npm 包管理器是否正确安装。

npm -v

执行命令后显示 npm 版本,说明 npm 包管理器已正确安装。

npm版本

3.安装 Vue CLI

打开本机的 cmd 窗口,执行以下命令使用腾讯云镜像源加速 npm。

npm config set registry http://mirrors.cloud.tencent.com/npm/

执行以下命令全局安装 Vue CLI。

npm install -g @vue/cli

安装成功结果如下图。

安装Vue CLI