安装node配置环境变量,安装yarn,安装vue脚手架,vue搭建项目流程

本文详细介绍了如何安装Node并配置环境变量,安装yarn,解决Vue脚手架版本问题,以及创建Vue项目的完整步骤。通过强制覆盖旧版本,确保Vue CLI的正确安装,并提供创建项目时的选项指南。最后推荐了一本关于Vue开发的实用技巧文档。

安装node配置环境变量,安装yarn,安装vue脚手架,vue搭建项目流程

安装Node

打开node官网,下载对应node版本的安装包:
https://nodejs.org/en/

安装完成后打开跟目录,根目录下创
建两个文件夹
"node_global"及"node_cache"两个文件夹 

配置环境变量

复制你node的目录路径,例如:
C:\Program Files\nodejs
然后再环境变量配置下path中配置这两条,这里将我们的nodejs修改为node-v16 

配置完成后执行这两条↓

npm config set prefix "路径\node_global"
npm config set cache "路径\node_cache" 

然后验证是否安装成功 node -v /npm -v

安装node会默认帮我们装好npm 到这里node就完成了。

yarn 安装

安装yarn 就更简单了一条指令即可👇
npm i yarn
yarn 下载所有的依赖包
yarn add xxx@2.0.0 下载执行依赖
yarn remove xxx 删除指定依赖包 

安装Vue脚手架

按照脚手架的步骤:其实就是node里面express框架,都是规定的一些模块。代码写的位置也是固定的,涉及路由模块,这个路由和后端的路由不是一个东西。涉及到组件,拆分组件(拆分页面),父传子,子传父...首先我们打开cmd 输入指令:
下载最新版本👇
npm i @vue/cli -g
下载指定版本👇
npm i @vue/cli@3.12.1 -g
## 然后vue -V出现版本号即可 

这里我出现一个报错信息,提示我vue版本过低,可能我已经装了vue脚手架

解决方案:强制覆盖旧版本,如果没报错这一步忽略,运行代码,👇

npm install -g @vue/cli --force

执行完成再次执行↓

npm install -g vue-cli

安装完成执行vue -V 出现版本号就完成了

如果你在创建vue项目时提示↓

说明下载的vue版本过低我们直接执行提示的两条命令就可以了
更新vue:
npm uninstall vue-cli -g
安装新版本:
vue:npm install -g @vue/cli 

第一次搭建vue项目

1.是否使用淘宝镜像?这个只会让你选择一次,我选择是,Y

2.选择最后一个,自定义安装,然后根据你的需求选择

3.是否设置历史路由?不设置 n

4.是否保存配置信息?默认不用 敲回车

5.是否保留配置文件?不保留 N

6.请选择安装依赖项时使用的包管理器:yarn还是npm?根据自己需求,我选yarn

好到这里就已经完成了。可以进入工作状态了!

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值