vue的安装和配置

vscode上vue的运行

安装Node.JS

安装Node.Js:

ffdf4a84b6b8d8ff28cce6f6eb0f437.png

bd05298a08977eebdd12993287b9951.png

95573552efbe90e5165552658a7da6d.png

如果想改变安装路径选择change

2af247246b503166317917e5b2e7762.png

40360285b88224bfb363e6bb151a672.png

7ae2a5608e1c0e642bf13b1cab65bb8.png

56ef40f2356699c88972dad969c45b6.png

09cb9f56c0cdb6475d2e47c038a7e54.png

安装完成后，检查一下是否安装成功。

打开cmd，输入如下指令。

2025-03-01_13-51.png

vue的安装

添加文件夹

在 node.js 的安装路径下增加两个文件夹， “node_cache ” (用于存放缓存资源) 和 " node_globa "（用于存放下载安装的全局模块）。

61cc7b016c7ebd9862110edc58392d2.png

设置系统环境变量

修改环境变量

0dff6a9d1e02104e0be6eb3e1a650fc.png

6748e7dcb2fb66c57253321be41a7f5.png

f5e5dd5b6d51bd548d650c28cfe123b.png

50004fd085b760fe3f33a1d6c91e1be.png

adcc730be782cd44aa403f1130c3399.png

镜像路径

npm config set registry https://registry.npmmirror.com

2025-03-01_14-38.png

输入下面指令查看路径 npm config get

2025-03-01_14-49.png

安装vue-cli脚手架构建工具

npm install -g @vue/cli

查看vue版本及是否成功

vue -V

2025-03-01_14-52.png

VSCode 配置

b4d5a6bdb4931262d3e2cb6f2bce04e.png

新建并允许 vue 项目

在 VS Code 中打开 terminal，进入项目准备存放的文件夹。

创建 vue3.0 项目 （项目名中不要出现中文和大写字母）

vue create 项目名

3860f55dbc725cc2107a0c0b5ba223e.jpg

d57242611519730ff5922497bfb1118.jpg

，大家根据前面安装的实际路径来。

本文由“云萌工作室-编程开发基础”专栏提供，关注更多编程技巧与知识。

@Author: L_NQ

@Date: 2025/03/02