最新Vue windows环境搭建与问题解决——写出你的Vue “Hello World”
前端学习,在Windows下搭建Vue开发环境:
1. 安装node.js
- Node官网下载
- 直接下载
一路Next即可,不过记住安装位置,默认路径为:
C:\Program Files\nodejs
检验是否安装成功:
命令行输入:
node -v
npm -v
如果安装成功会输出相应版本号:
报错问题:
- win10下安装node之后,node -v正常,npm -v报错,如下:
npm WARN logfile could not create logs-dir: Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_cache\_logs'
原因:node目录权限不够;
解决办法:找到node安装目录,右键属性,点击安全,设置users用户完全控制权限,如下图。
- node -v正常,npm -v无反应,如下
原因:输入命令 npm config set prefix 或者其他命令输入后导致npm -v完全没反应,因为使用其他命令使npm的config乱掉了;
解决方法:将"C:\Users\用户.npmrc" 文件如图修改一下,或者删除再进行之后的操作,注意此用户为你的电脑那个。
这里要注意,不是nodejs安装目录npm模块下的那个npmrc文件,而是在C:\Users\用户\ 下的.npmrc文件:
有误的修改和第二行格式一致:
正确的:
- 输入cnpm install vue –g
‘cnpm’ 不是内部或外部命令,也不是可运行的程序
或批处理文件。
2. 设置node的全局和缓存路径
在安装目录下新建两个文件夹:node_cache、node_global,如图:
然后CMD命令行输入,或者直接手动修改上面文件,修改成自己的路径
设置缓存路径,注意路径为你安装的实际路径:
npm config set cache “C:\Program Files\nodejs\node_cache”
设置全局模块存放路径:
npm config set prefix “C:\Program Files\nodejs\node_global”
不报错即可:
3. 安装淘宝镜像
CMD输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
4. 设置环境变量
设置环境变量的目的是在任何目录都可以执行node和vue命令,注意均为你的安装目录。
PATH增加
C:\Program Files\nodejs\node_global
新建NODE_PATH,值:
C:\program\nodejs\node_modules
5. 安装Vue
需要先关上命令行窗口,再次打开CMD,执行安装vue命令:
cnpm install vue –g
6. 安装Vue-cli脚手架
cnpm install -g vue@cli
报错,执行如下命令:
npm i npm -g
然后再执行:
npm i @vue/cli -g
cnpm i @vue/cli -g
OK!
如果此时node -v正常,npm -v无反应,请看1.中的问题2.
7. 创建一个Vue项目
找一个自己喜欢的目录下CMD执行:
vue create first
按着提示输入命令:
cd first
npm run serve
加载一会就出来了拉:
crtl + 点击http://localhost:8080/本机浏览器就可以打开了。
效果如图:
记录一下自己运行的第一个Vue项目吧,虽然只是一个“Hello World”,嘻嘻嘻.
参考资料:手把手教你在Windows下搭建Vue开发环境
npm问题:在命令函或者终端中输入npm -v 没有反应【已解决】
最新Vue windows环境搭建与问题解决——写出你的Vue “Hello World”相关推荐
- 2022最新 VSCode + LaTex 环境搭建、问题解决
目录 需要的组件: vscode SumatraPDF texlive 遇到的问题: texlive的ISO无法安装,报错No such file or directory at -- VSCode报 ...
- 浅入深出Vue:环境搭建
浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...
- kafka windows环境搭建 SASL_PLAINTEXT/SCRAM
kafka windows环境搭建 SASL_PLAINTEXT/SCRAM acl认证记录 一.kafka 下载参考地址 https://kafka.apache.org/downloads 二.环 ...
- ESC32 windows 环境搭建【Visual Studio Code】
ESP32 windows 环境搭建 第一步:工具准备 1.Visual Studio Code下载 2.工具链下载 3.SDK下载 第二步:搭建环境 1.Visual Studio Code安装 2 ...
- Vue 开发环境搭建(Mac 版)
Vue 开发环境搭建(Mac 版) 参考: https://www.jianshu.com/p/cc722eba1f46 https://www.runoob.com/w3cnote/vue2-sta ...
- 高通平台上的AMSS(Modem端) windows环境搭建
高通平台上的AMSS(Modeom端)Windows环境搭建 一.首先简单介绍一下,高通平台7&8系列平台的软硬件架构. 如图: 硬件上采用的是ARM9+ARM11(最新的采用Cotex-A8 ...
- Windows环境搭建 Gitlab 服务器
Windows环境搭建 Gitlab 服务器 01 背景 新公司测试部门目前没有专门的代码管理工具,出于管理方便,我在 Window10上搭建了Git 服务器,用于日常各项目自动化脚本的管理. 02 ...
- 高通平台上的AMSS(Modeom端)Windows环境搭建
高通平台上的AMSS(Modeom端)Windows环境搭建 一.主要介绍如何建立AMSS代码的编译环境 编译AMSS的source有两种方式:一是在windows下编译 ,另一是在linux下编译. ...
- Kafka单机Windows环境搭建
Kafka单机Windows环境搭建 1,安装jdk1.8:安装目录不能有中文空格: 2,下载zookeeper,https://mirrors.cnnic.cn/apache/zookeeper/z ...
最新文章
- 企业安全挑战 内网安全技术十大策略
- phpmailer 私密抄送_使用 phpmailer 发送邮件,支持抄送、密送和发送附件
- python自动发送微信-Python自动定时发送微信消息
- mysql启用组提交变量_MySQL的COMMIT_ORDER模式下组提交分组实现与BUG案例源码剖析...
- 11.考虑用排序的vector替代关联容器
- Servlet_urlpartten配置
- 十一、jQuery的基本用法
- java基准测试_微基准测试进入Java 9
- SAP中货源清单创建的几种方法
- SolarWinds 升级 APM Suite,简化应用程序和基础架构管理!
- 关于Cocos2d-x发布游戏的时候遇到的问题和解决
- python新手常犯的17个错误
- tomcat启动时报错ports are invalid,默认端口不要为-1
- Linux串口调试总结
- 语音验证码接口对接DEMO示例PHP语言
- SDUTOJ 2178 - 链表的有序集合
- Idea使用系统应用打开md文件
- django 异步_Django和异步支持:永无止境的故事
- 几步解决安装win11后vc++6.0不兼容问题
- python练习题,使用爬虫爬取百度百科内置BeautifulSoup安装方法