完整的vue开发环境搭建教程

完整的vue开发环境搭建教程一 安装 node js https nodejs org en 下载完毕后 可以安装 node 建议不要安装在系统盘 如 C 输出版本号则安装成功 node v 输出版本号则安装成功二 设置 nodejsprefix 全局 和 cache 缓存 路径查看 npm 安装目录 npmroot g 查看 npm 的 prefix 和 cache 路径配置信息 npmconfigget 修改全局和缓存路径 1 先在设置路径目录

一、安装node.js(https://nodejs.org/en/)

在这里插入图片描述
下载完毕后,可以安装node,建议不要安装在系统盘(如C:)。
在这里插入图片描述
输出版本号则安装成功






node -v//输出版本号则安装成功 

二、设置nodejs prefix(全局)和cache(缓存)路径

  1. 查看npm安装目录:
npm root -g 
  1. 查看npm的prefix和cache路径配置信息
npm config get cache npm config get prefix 
  1. 修改全局和缓存路径
    1). 先在设置路径目录下新建两个文件夹(eg:node_global和node_cache),eg:直接在nodejsd安装目录下
    在这里插入图片描述




2). 设置路径

npm config set prefix "D:\ProgramFile\nodejs\node_global" npm config set cache "D:\ProgramFile\nodejs\node_cache" 

设置成功后,之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里

三、基于 Node.js 安装cnpm(淘宝镜像)

 npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set disturl https://npm.taobao.org/dist --global 

四、设置环境变量(非常重要)

在这里插入图片描述
3、新增系统变量NODE_PATH
在这里插入图片描述




五、安装Vue

cnpm install vue -g 

六、安装vue命令行工具,即vue-cli 脚手架

npm uninstall vue-cli -g//删除以前的vue cli cnpm install vue-cli -g//vue cli2 cnpm install -g @vue/cli//vue cli3 

七、新项目的创建

1、打开存放新建项目的文件夹

2、打开开始菜单,输入 CMD,或使用快捷键 win+R,输入 CMD,敲回车,弹出命令提示符。打开你将要新建的项目目录

vue init webpack-simple mytest//vue cli2 vue create project-name//vue cli3 

注:项目名必须为英文且不能大写

3、运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。

cnpm run dev//vue cli2 cnpm run serve //vue cli3 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/176379.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午10:04
下一篇 2026年3月26日 下午10:05


相关推荐

  • IDEA 端口被占用 解决办法

    IDEA 端口被占用 解决办法解决方法 开始 gt 运行 gt cmd window R 组合键 调出命令窗口 输入命令 netstat aon findstr8080 被占用的端口 可以看出占用端口的是 PID 为 3108 的进程 直接结束该进程 taskkill f t im3108

    2026年3月19日
    2
  • c语言线程间传递消息,线程间通信[通俗易懂]

    c语言线程间传递消息,线程间通信[通俗易懂]线程间通信前面一章讲了线程间同步,提到了信号量、互斥量、事件集等概念;本章接着上一章的内容,讲解线程间通信。在裸机编程中,经常会使用全局变量进行功能间的通信,如某些功能可能由于一些操作而改变全局变量的值,另一个功能对此全局变量进行读取,根据读取到的全局变量值执行相应的动作,达到通信协作的目的。RT-Thread中则提供了更多的工具帮助在不同的线程中间传递信息,本章会详细介绍这些工具。学习完本章,…

    2022年10月7日
    3
  • 搭建简单的Eurake服务学习笔记

    搭建简单的Eurake服务学习笔记搭建简单的Eureka服务简单介绍Eureka原理:Eureka集群主要有三个部分Eureka服务器,服务提供者,服务调用者简单的来说就是服务提供者将服务注册到Eureka服务器,服务调用者对其服务进行查找调用。搭建三个项目:创建三个SpringStarterProject类型的项目:[外链图片转存失败(img-aVuiN1EV-1563345334382)(file://…

    2022年5月24日
    43
  • ETL-Kettle学习笔记(入门,简介,简单操作)

    ETL-Kettle学习笔记(入门,简介,简单操作)KETTLEKettle:简介Kettle:概念Kettle是一款国外开源的ETL工具,纯java编写,可以在Window、Linux、Unix上运行,绿色无需安装,数据抽取高效稳定。Kett

    2022年8月2日
    9
  • pycharm设置断点单步运行_pycharm怎么debug

    pycharm设置断点单步运行_pycharm怎么debug在我们平时写程序的时候,简单的程序一眼就能看出问题所在,但是稍微大一点的程序,就很难在茫茫代码中找到一个参数的失误带来的bug,所以我们引入debug单步调试。一、常用操作F8:stepover单步遇到断点后,程序停止运行,按F8单步运行。不进入调用函数内部F7:stepinto进入配合F8使用。单步调试F8时,如果某行调用其他模块的函数,在此执行F7,可以进入函数内部,如果是F…

    2022年8月27日
    41
  • 2025年重磅发布:腾讯混元图像3.0完全指南 – 全球最大开源文生图模型深度解析

    2025年重磅发布:腾讯混元图像3.0完全指南 – 全球最大开源文生图模型深度解析

    2026年3月13日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号