Web前端：Vue开发环境搭建

無_爲2024-08-04 9:08

一、搭建开发环境：

1.nodejs安装：

下载地址：

html 复制代码

https://nodejs.org/dist/v20.13.1/node-v20.13.1-x64.msi

查看版本号：

bash 复制代码

node -v

2.安装nrm(用于指定国内镜像源，加速依赖包下载速度)：

安装nrm：

bash 复制代码

npm install nrm -g

查看镜像源列表：

bash 复制代码

nrm ls

使用国内镜像源：

bash 复制代码

nrm use taobao

3.安装vue-cli脚手架(用于创建工程)：

(1)先卸载已存在的旧vue-cli脚手架：

bash 复制代码

npm uninstall vue-cli -g

(2)安装vue-cli脚手架：

bash 复制代码

npm install -g @vue/cli

4.安装Visual Studio Code：

下载地址：

html 复制代码

https://code.visualstudio.com/docs/?dv=win64user

安装Vetur插件(代码自动提示)：

二、使用vue-cli脚手架创建工程：

1.命令行输入创建命令：

bash 复制代码

vue create 工程名

2.根据需要选择项目配置，见下图：

可选择默认或手动配置：

勾选需要的功能：

选择vue版本：

3.打开Visual Studio Code，将整个工程拖拽到Visual Studio Code(会自动加载)。

4.启动项目：

bash 复制代码

npm run serve