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

简介: 在Windows下搭建Vue开发环境:

在Windows下搭建Vue开发环境:


1. 安装node.js


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


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


安装步骤:


微信图片_20221009234111.png


微信图片_20221009234121.png


微信图片_20221009234126.png


微信图片_20221009234131.png


微信图片_20221009234136.png


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


在安装目录下新建两个文件夹:node_cache、node_global


微信图片_20221009234142.png

设置缓存路径: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


微信图片_20221009234146.png


4. 设置环境变量


设置环境变量的目的是在任何目录都可以执行node和vue命令。

path增加E:\program\nodejs\node_global


微信图片_20221009234150.png


新建NODE_PATH,值E:\program\nodejs\node_modules


微信图片_20221009234155.png

5. 安装Vue


需要先关上命令行窗口。再次打开cmd,执行安装vue命令:

cnpm install vue –g


微信图片_20221009234159.png

6. 安装Vue-cli脚手架


cnpm install -g vue@cli

报错,执行如下命令:

npm i npm -g


微信图片_20221009234205.png

npm i @vue/cli -g


微信图片_20221009234209.png


cnpm i @vue/cli -g


微信图片_20221009234213.png

7. 创建一个Vue项目

vue create first


微信图片_20221009234222.png

cd first

npm run serve


微信图片_20221009234227.png

目录
相关文章
|
6天前
|
移动开发 JavaScript 前端开发
学习vue3使用在线官方开发环境play.vuejs.org进行测试
学习vue3使用在线官方开发环境play.vuejs.org进行测试
12 1
|
6天前
|
Serverless API 数据安全/隐私保护
Serverless 应用引擎产品使用之阿里函数计算中在本地搭建Windows开发环境与阿里云函数计算进行交互如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
23 0
|
6天前
|
缓存 监控 JavaScript
环境搭建:Vue项目的开发环境和生产环境配置
【4月更文挑战第23天】本文指导Vue开发者配置开发和生产环境,强调了两者目的和特点。开发环境用于编写、测试和调试,侧重快速反馈和调试工具;生产环境注重稳定性、效率和安全性,需进行代码优化、错误处理和日志监控。配置步骤包括安装Node.js和npm,使用Vue CLI,配置Webpack、热重载和源码映射。生产环境要实现代码分割、压缩、最小化,启用CSP、HTTPS,优化静态资源和缓存策略。环境配置应随项目发展和技术进步持续优化。
|
6天前
|
编译器 C语言 C++
VSCode上搭建C/C++开发环境(vscode配置c/c++环境)Windows系统---保姆级教程
VSCode上搭建C/C++开发环境(vscode配置c/c++环境)Windows系统---保姆级教程
|
6天前
|
Linux 编译器 C语言
FFmpeg开发笔记(二)搭建Windows系统的开发环境
在Windows上学习FFmpeg通常较困难,但通过安装预编译的FFmpeg开发包可以简化流程。首先需要安装MSYS2来模拟Linux环境。下载并执行MSYS2安装包,然后修改msys2_shell.cmd以继承Windows的Path变量。使用pacman安装必要的编译工具。接着,下载预编译的FFmpeg Windows包,解压并配置系统Path。最后,在MSYS2环境中运行`ffmpeg -version`确认安装成功。欲深入学习FFmpeg开发,推荐阅读《FFmpeg开发实战:从零基础到短视频上线》。
40 4
FFmpeg开发笔记(二)搭建Windows系统的开发环境
|
6天前
|
编译器 C语言 流计算
在Windows系统中创建C语言开发环境
【2月更文挑战第22天】在Windows系统中创建C语言开发环境
24 6
|
6天前
|
存储 运维 JavaScript
vue读书笔记开发环境搭建
vue读书笔记开发环境搭建
|
6天前
|
JavaScript 前端开发 编译器
Vue快速上手笔记2 - 开发环境的搭建
Vue快速上手笔记2 - 开发环境的搭建
27 0
|
6天前
|
Oracle Java 关系型数据库
【开发环境】Windows环境下JDK安装&环境变量配置(无错完整)
【1月更文挑战第20天】【开发环境】Windows环境下JDK安装&环境变量配置(无错完整)
|
6天前
|
Python Windows
Windows系统上配置Python开发环境
Python安装程序 首先,您需要从Python官方网站(https://www.python.org/downloads/)下载Python的最新稳定版本。在页面上选择适用于Windows的安装程序。 运行安装程序 下载完成后,双击下载的安装程序(通常是一个.exe文件),然后按照安装向导的指示进行操作。请确保在安装过程中勾选“Add Python to PATH”选项,这将使您能够在命令行中轻松访问Python。
50 1