手把手教你在Windows下搭建Vue开发环境

这篇具有很好参考价值的文章主要介绍了手把手教你在Windows下搭建Vue开发环境。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近有小伙伴不会Vue环境的部署,小孟亲自测试了下,大家有需要的可以按照下面的学习。

如果想看视频的,也可以看视频的教程:

https://www.bilibili.com/video/BV1if4y1X7BS/?spm_id_from=333.788.recommend_more_video.-1&vd_source=e64f225fc5daf048d2687502cb23bb3b

在Windows下搭建Vue开发环境:

1. 安装node.js

官网https://nodejs.org/en/

下载地址https://npm.taobao.org/mirrors/node/v12.18.3/

安装步骤:

手把手教你在Windows下搭建Vue开发环境
手把手教你在Windows下搭建Vue开发环境
手把手教你在Windows下搭建Vue开发环境
手把手教你在Windows下搭建Vue开发环境
手把手教你在Windows下搭建Vue开发环境

2. 设置node的全局和缓存路径

在安装目录下新建两个文件夹:node_cache、node_global
手把手教你在Windows下搭建Vue开发环境

设置缓存路径:npm config set cache “E:\program\nodejs\node_cache”
设置全局模块存放路径:npm config set prefix “E:\program\nodejs\node_global”

3. 安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
手把手教你在Windows下搭建Vue开发环境

4. 设置环境变量

设置环境变量的目的是在任何目录都可以执行node和vue命令。
path增加E:\program\nodejs\node_global

手把手教你在Windows下搭建Vue开发环境

新建NODE_PATH,值E:\program\nodejs\node_modules
手把手教你在Windows下搭建Vue开发环境

5. 安装Vue

需要先关上命令行窗口。再次打开cmd,执行安装vue命令:
cnpm install vue –g
手把手教你在Windows下搭建Vue开发环境

6. 安装Vue-cli脚手架

cnpm install -g vue@cli
报错,执行如下命令:
npm i npm -g
手把手教你在Windows下搭建Vue开发环境

npm i @vue/cli -g

手把手教你在Windows下搭建Vue开发环境

cnpm i @vue/cli -g
手把手教你在Windows下搭建Vue开发环境

7. 创建一个Vue项目

vue create first
手把手教你在Windows下搭建Vue开发环境
cd first
npm run serve
手把手教你在Windows下搭建Vue开发环境

http://localhost:8080/

点赞、关注支持,我会不断更新各种干货!文章来源地址https://www.toymoban.com/news/detail-481722.html

到了这里,关于手把手教你在Windows下搭建Vue开发环境的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 9个步骤,手把手教你在Windows上安装Hadoop

    在Windows上安装Hadoop时经常会出现许多错误,很多用户使用基于Linux的操作系统。本文详细讲述如何在Windows上安装和运行Apache Hadoop,如果遇到了问题,可以参考文章中的步骤进行解决。 微信搜索关注《Java学研大本营》 在 Microsoft Windows 上运行 Apache Hadoop 是比较繁琐的任务,在

    2024年02月08日
    浏览(64)
  • 手把手教你在windows下源码编译Open3D

    首先不建议windows下源码编译,需要用C++的可以直接下载官网编译好的版本。熟悉vcpkg的,可以把open3d加到vcpkg使用,参考该博客。 cmake =3.20 python =3.6.0 visual studio =2017 Github下载open3d源码 打开源码,新建build文件夹 填写你的VS版本,例vs2022(17),open3d_install_directory使用当前路径

    2024年02月05日
    浏览(47)
  • 手把手教你在Linux/Windows系统使用Nginx部署多个前端项目【详细操作】

            需求:项目上线需要将前端的前台和后台部署在服务器上提供用户进行使用,部署在不同的服务器直接在服务器安装nginx即可。但是在内网安装还是有点麻烦,因为需要联网,如果是内网可以参考Linux安装Nginx并部署前端项目【内/外网-保姆级教程】_MXin5的博客-CSDN博

    2024年02月14日
    浏览(51)
  • 【运维】手把手教你在Linux/Windows系统使用Nginx部署多个前端项目【详细操作】

            需求:项目上线需要将前端的前台和后台部署在服务器上提供用户进行使用,部署在不同的服务器直接在服务器安装nginx即可。但是在内网安装还是有点麻烦,因为需要联网,如果是内网可以参考Linux安装Nginx并部署前端项目【内/外网-保姆级教程】_MXin5的博客-CSDN博

    2024年02月08日
    浏览(51)
  • 手把手教你搭建VUE+VScode+elementUI开发环境

    1.安装node.js 按照VUE必须先要安装node.js (1)打开NodeJs官网:https://nodejs.org/en/download/ ,根据系统下载,Windows操作系统一般选择是64-bit。 (2)点击64-bit就开始下载了。 (3)双击安装,安装过程基本直接“NEXT”就可以了。(windows的安装msi文件在过程中会直接添加path的系统变

    2024年02月09日
    浏览(32)
  • 【electron】手把手教你在 electron 环境下使用 vue-devtools,附详细报错解决办法

    描述 对于某些electron项目,启动的时候,控制台会打印 Failed to fetch extension, trying 4 more times 这样的日志。 作为重度强迫症患者,必须解决掉。 环境 版本号 描述 文章日期 2023-10-12 操作系统 Windows electron 22.3.27 最后一个支持win7的大版本 node 16.16.0 vue-devtools 6.5.1 Vue Devtools 是一款

    2024年02月07日
    浏览(46)
  • 【MMDeploy&MMPose】手把手教你在Windows上使用MMDeploy1.x进行ONNX和TensorRT的部署(Python篇)

    2023.9.8更新 C++ SDK篇已经发布,点击这里传送到文章 MMDeploy 提供了一系列工具,帮助我们更轻松的将 OpenMMLab 下的算法部署到各种设备与平台上。 MMDeploy 定义的模型部署流程,这里直接使用了官方文档的内容,如下图所示:  1)模型转换(Model Converter) 模型转换的主要功能是

    2024年01月16日
    浏览(42)
  • 【实战】手把手教你在 vscode 中写 markdown

    markdown 语法、markdown 插件咱先放放,先说最头疼的,图片问题 相对于 HBuilder 自带 markdown 图片粘贴功能来说,vscode显得不那么友好,若是不装插件粘贴截图就只能手动进行如下操作: 截取图片 将图片存在特定位置 在markdown文件中通过路径引入图片 预览 最终我找到了 Paste I

    2024年02月13日
    浏览(61)
  • 手把手教你,本地RabbitMQ服务搭建(windows)

    前面已经对RabbitMQ介绍了很多内容,今天主要是和大家搭建一个可用的RabbitMQ服务端,方便后续进一步实操与细节分析 跟我们跑java项目,要装jdk类似。rabbitMQ是基于Erlang开发的,因此安装rabbitMQ服务器之前,需要先安装Erlang环境。 【PS: 我已经上传了对应资源,windows可直接下载

    2024年02月14日
    浏览(42)
  • 手把手教你在 CentOS 7 下升级 OpenSSL

      这篇文章记录着如何在 CentOS 7 上升级 OpenSSL。会逐步介绍所需步骤,包括备份,下载和安装,以及配置等。 OpenSSL 是用于保护数据安全的重要工具。它能提供加密,解密等多项功能。然而,随着技术的发展和新的安全漏洞的出现,使用最新版本的 OpenSSL 成为了重要的需求

    2024年02月16日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包