位置: IT常识 - 正文

vue安装及环境配置(怎么安装vue环境)

编辑:rootadmin
vue安装及环境配置

目录

1.安装 Node.js

2.配置默认安装目录和缓存日志目录

3.配置环境变量 

4.配置淘宝镜像

5.安装vue和脚手架

6.创建并运行项目


1.安装 Node.js

推荐整理分享vue安装及环境配置(怎么安装vue环境),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue2.0安装,vue安装配置,vue安装及环境配置教程,vue的安装步骤,vue安装及环境配置教程,vue安装及环境配置脚手架,vue安装及环境配置脚手架,vue安装环境配置,内容如对您有帮助,希望把文章链接给更多的朋友!

Download | Node.js

在这里👆下载的是最新版,如果要安装以前的版本👇,页面往下拉找到

Previous Releases—Donloads—下载msi文件。

 ​​

1.1 一直next即可安装成功。

1.2 安装后在cmd控制台输入node -v和npm -v(注意中间有个空格)验证是否安装成功。

node -vnpm -v

 

2.配置默认安装目录和缓存日志目录

2.1 在nodejs安装的目录创建两个空文件夹:node_cache和node_global。

2.2 打开cmd,依次输入下面两行

npm config set prefix "D:\Program Files\nodejs\node_global"npm config set cache "D:\Program Files\nodejs\node_cache"3.配置环境变量 

3.1 windows旁边的搜索键搜索编辑系统环境变量,或右击此电脑—属性—高级系统设置,打开环境变量设置界面。

3.2 将用户变量最后一行的C:\Users\admin\AppData\Roaming\npm 修改为

D:\Program Files\nodejs\node_global

3.3 系统变量中新增一个变量,如下👇

3.4 系统变量中的path增加最后三行(第一行应该是安装软件Node.js时自动添加了,所以手动添加只需要最后两行)。

4.配置淘宝镜像

4.1 找到cmd.exe,右击—以管理员身份运行

 注意注意!!!一定要以管理员身份运行cmd,直接Win+R—cmd会安装错误

 

vue安装及环境配置(怎么安装vue环境)

4.2 安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

4.3 验证安装成功:

cnpm config get registrycnpm -v

5.安装vue和脚手架

5.1 安装vue

cnpm install vue -gnpm install -g @vue/cli

我尝试了很多种安装vue的方法,直到验证vue安装成功👇(不管安装的时候是不是一直出现警告,vue -v验证成功就好)

vue -v

出现这种情况就是没有安装成功👇

 我网上查到的还有一种验证方法,但是我刚开始vue没有安装成功也出现了如下结果,当时我以为安装成功,所以我更推荐用vue -v验证。

5.2 安装webpack模块(用webpack的原因是方便vue组件化)

安装webpack需要安装两个包,webpack主包和webpack-cli

cnpm i webpack webpack-cli webpack-dev-server -g

踩坑无数,最终上面这个安装方法成功🤦‍。检验是否安装成功:webpack -v

5.3 安装vue-cli3.x

cnpm install @vue/cli –g6.创建并运行项目

6.1 把路径修改到vue项目想创建到的文件夹,例如我想把它放在D盘

 6.2 创建项目

vue create test(test是项目名称,可以改成别的)

可以选择创建2版本或者3版本的项目👇

 创建成功👇

 6.3 运行项目

按照cmd的提示操作👇

 先把路径改到刚刚创建的项目,然后再运行,语句如下👇

npm run serve

运行成功后,复制下面其中一个网页在浏览器打开,即可得到网页。

 

 

本文链接地址:https://www.jiuchutong.com/zhishi/290835.html 转载请保留说明!

上一篇:【小程序项目开发 -- 京东商城】uni-app 商品分类页面(上)(微信小程序开发完整项目)

下一篇:日本长野县安昙野附近的燕岳山 (© Joshua Hawley/Getty Images)(日本长野县在哪)

  • 细节设计上把握用户的从众心理,往往能收到意想之外的收获。(细节设计的重要性)

  • 苹果12如何设置来电铃声(苹果12如何设置壁纸)

  • 荣耀play4tpro屏幕刷新率是多少(荣耀play4tpro屏幕多少钱)

  • WPS文档加密如何设置(wps文档加密如何取消设置)

  • 苹果icould下载失败怎么办(icloud下载失败)

  • 夸克答题助手不能用了(夸克搜索答题在哪里)

  • 微信扫码怎么改成后置摄像头(微信扫码怎么改成零钱支付)

  • qq发文件要加好友吗(qq发文件夹必须要压缩吗)

  • 1m和1mb有什么区别(1mb与m有什么区别)

  • 苹果x怎么设置来电拒接(苹果x怎么设置陌生来电拦截)

  • 华为手机连接蓝牙为什么没有声音(华为手机连接蓝牙耳机怎么连)

  • oppor9plus有没有语音唤醒功能(oppor9plus有没有红外线遥控功能)

  • 无线打印是什么意思(打印机无线打印功能实用吗)

  • 路由器时好时坏怎么回事(路由器时好时坏是什么原因)

  • wifi盒子叫什么(wifi盒子叫啥)

  • 有什么美化桌面的软件(美化桌面图标的软件)

  • 天猫精灵不支持5g咋办(天猫精灵不支持酷狗vip)

  • 手机qq怎么不显示年龄(手机qq怎么不显示会员图标)

  • 华为mate30出厂带有膜吗(华为mate30出厂日期查询)

  • word怎样生成自动目录(word生成ceb)

  • 小米9充电线是几a(小米9充电线是几a的)

  • 小米拦截电话在哪里设置(小米拦截电话在哪里取消设置)

  • 小米mix2充电充不进去(小米mix2s充电问题)

  • 如何替换文本中的文字(如何替换文本中的空格格式)

  • 锤子手机如何强制关机(锤子手机如何强制关机同意?)

  • 安卓手机微信如何分身(安卓手机微信如何隐藏好友)

  • (全网最详细!!)npm:无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称(全网最详细的破解卡密软件教程[2021首发])

  • statserial命令 显示串口状态(stat命令的作用)

  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设 电脑维修 湖南楚通运网络