vue脚手架搭建2022年6月版本(保姆级-直接到路由使用)(1)

简介: vue脚手架搭建2022年6月版本(保姆级-直接到路由使用)(1)

1、Node.js环境安装

官网地址:【Node.js】 :


image.png


为了稳定,咱们下载:【16.15.1的版本】


image.png


等待一会下载。

image.png

image.png

image.png

清一色【Next】到最后安装:

image.png



点击【Finish】完成

image.png



可以在C盘下【C:\Program Files\nodejs】找到【node.exe】文件

image.png



2、Node.js环境配置

在【C:\Program Files\nodejs】位置上创建两个文件夹【node_global】与【node_cache】

image.png


打开【cmd】修改配置位置:


npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

这里报错的【npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.】,您可以使用 –location=global Command 而不是 global –global,–local 已被弃用。


需要找到【npm】文件里面的prefix -g替换为prefix --location=global


image.png


不换也行,我是没换,如果有需要,可以自己换。

image.png



查看位置:


npm config list

image.png


3、修改国内的【阿里】镜像

npm config set registry=http://registry.npm.taobao.org

再通过【npm config list】查询:

image.png



查看镜像是否OK


npm config get registry

image.png


确定配置完毕。


查看vue信息


npm info vue

可以看到vue的3.2..37版本

image.png



4、更新npm

【-g】装到【global下】,就是刚才自己创建的文件夹。

npm install npm -g

image.png




5、环境变量配置:

增加环境变量NODE_PATH 内容是:【C:\Program Files\nodejs\node_global\node_modules】


C:\Program Files\nodejs\node_global\node_modules

image.png


6、安装vue与router

npm install vue -g

这里的-g是指安装到global全局目录去,就是刚才配置的环境变量位置。


image.png


查看是否安装成功:

image.png



继续安装vue的路由器。


npm install vue-router -g

image.png

相关文章
|
1天前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
1天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
7 0
|
1天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
7 0
|
1天前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
1天前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01
|
5月前
|
JavaScript
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
|
JavaScript 数据可视化 前端开发
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
194 0
vue脚手架3详细配置,爆肝两天,你可以不用,但是不能不会
|
1天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
22 0
|
1天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
1天前
|
JavaScript
vue里样式不起作用的方法,可以通过deep穿透的方式
vue里样式不起作用的方法,可以通过deep穿透的方式
14 0