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

相关文章
|
10月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
10月前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`,实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象,动态响应属性的增删,还优化了嵌套对象的处理和依赖追踪,减少了不必要的视图更新,提升了性能。同时,Vue 3.x对数组的响应式处理也更加灵活,简化了开发流程。
|
11月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
251 3
|
11月前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
203 3
|
11月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
10月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
394 0
|
11月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
454 0
|
JavaScript Go
|
JavaScript C语言 Go
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
508 0