Vue3安装配置+VSCode开发环境搭建,超详细保姆级教程(图文)

Vue3安装配置+VSCode开发环境搭建,超详细保姆级教程(图文)

目录

1. node.js 下载安装2. 查看 node.js 是否安装成功3. 配置 npm 下载的默认安装、缓存环境(1) 添加文件夹(2) 设置系统环境变量(3) 修改下载模块的存放路径

4. npm 镜像源配置(1) 输入cmd打开命令提示符窗口,(2) 如果配置报错(3) 查看镜像配置是否成功

5. 安装 vue-cli 工具6. VSCode 配置(1) 安装插件(2) 新建并允许 vue 项目

7. 大功告成

1. node.js 下载安装

nodejs官网下载链接:https://nodejs.org/zh-cn/download 推荐带TLS标识的长期维护的版本,选择版本后,这里我们直接使用prebuilt的msi安装包安装。

下载好打开安装包,选择自己要安装的路径,其他都默认配置即可。安装时会有 “是否需要自动安装工具” 的提示框,可以不勾选,后期需要再单独安装。

安装路径在后续设置环境变量时需要用到,我的安装路径放在D:\app\nodejs目录。

2. 查看 node.js 是否安装成功

安装node.js时会自动安装 npm, 我们查看一下 node 和 npm 的版本。

输入cmd打开命令提示符窗口, 输入 node -v 和 npm -v 查看安装的版本号。

node -v

npm -v

3. 配置 npm 下载的默认安装、缓存环境

主要配置 1. npm 下载的全局模块所在路径 和 2. 缓存 cache 的路径。

(1) 添加文件夹

在 node.js 的安装路径下增加两个文件夹, “ node_cache ” (用于存放缓存资源) 和 " node_global "(用于存放下载安装的全局模块)。 我存放在 D:\app\nodejs 目录下,大家根据前面安装的实际路径来。

(2) 设置系统环境变量

修改环境变量,

系统搜索 “查看高级系统设置” - “环境变量” - “系统变量” - “新建”

变量名: NODE_PATH

变量值: D:\app\nodejs\node_modules (修改成自己的nodejs路径)

如果系统环境变量无法新建、编辑、删除,一定要通过“ 查看高级系统设置 ”进入该页面。

修改系统环境变量 Path

编辑Path,确保D:\app\nodejs存在,并新增

D:\app\nodejs\node_global(修改成自己的nodejs路径)

(3) 修改下载模块的存放路径

默认的存放路径为 C:\Users\用户名\AppData\Roaming\npm,容易占满 C盘空间。建议修改。

输入cmd打开命令提示符窗口, 配置相应路径(按实际情况修改为自己的路径)

npm config set prefix "D:\app\nodejs\node_global"

npm config set cache "D:\app\nodejs\node_cache"

配置完成后,查看修改是否成功

npm config get prefix

npm config get cache

4. npm 镜像源配置

原npm下载速度较慢,需要设置镜像。用以下命令配置阿里的 cnpm 命令行工具,后续可以使用 cnpm install 命令来代替 npm install, 加快下载速度。

(1) 输入cmd打开命令提示符窗口,

npm install -g cnpm --registry=http://registry.npmmirror.com

(以前的 https://registry.npm.taobao.org/ 镜像网站已停止维护,请使用上面最新的镜像)

(2) 如果配置报错

检查是否有权限编辑该文档,并使用管理员模式运行命令提示符窗口。显示下面窗口则表示安装成功。

(3) 查看镜像配置是否成功

npm config get registry (返回阿里的镜像地址即可)

cnpm -v (返回cnpm的版本号)

5. 安装 vue-cli 工具

输入cmd打开命令提示符窗口, 配置相应路径(按实际情况修改为自己的路径)

cnpm install -g @vue/cli

提示安装成功即可。

6. VSCode 配置

到这一步,基本配置都已经完成,我们可以尝试来新建项目并打开网页了。

(1) 安装插件

安装 vue-official (官方推荐) 和 vetur 插件。

(2) 新建并允许 vue 项目

在 VS Code 中打开 terminal,进入项目准备存放的文件夹。 创建 vue3.0 项目 (项目名中不要出现中文和大写字母)

vue create 项目名

出现提示选择默认的 vue3 即可。 根据提示进入项目文件夹,运行即可。

cd helloworld

npm run serve

7. 大功告成

不出意外的话,这里可以成功打开 VSCode 中给出的地址,显示以下界面了!

https://cn.vuejs.org/guide/quick-start 后续就可以根据官方文档学习提升了~

相关推荐

365bet亚洲版登陆首页 320公里开车多久

320公里开车多久

365bet游戏网站 win10电脑日历怎么显示农历?win10日历显示农历设置方法

win10电脑日历怎么显示农历?win10日历显示农历设置方法

bt365博彩手机版 排名最好的面包机(什么牌子面包机最好用面包机选购方法)

排名最好的面包机(什么牌子面包机最好用面包机选购方法)