提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、下载安装node.js
二、node.js环境配置
三、下载安装vue脚手架

前言

初学Vue 搭环境快把我整死了QAQ 差点入门即入土

一、下载安装node.js

①下载地址：https://nodejs.org/en/
点击下图所示直接下载，可以得到一个node-v18.14.2-x64.msi文件，直接双击安装

②点击next，勾选同意协议，然后next：

③选择路径，不要装到c盘，然后next再next：

④复选框不必勾选，next，install：

⑤完成：

安装完成后，.msi格式的安装包已经将node启动程序添加到系统环境变量path中，如果想验证可以查看一下：

⑥打开cmd，输入：

node -v

出现版本号说明node安装成功。
最新版的node在安装时同时也安装了npm,执行

npm -v

查看npm版本

二、node.js环境配置

① 打开安装目录在安装目录下新建两个文件夹node_global和node_cache：

② 用管理员权限打开cmd命令窗口，输入npm config set prefix “你的路径\node_global”：

npm config set prefix "D:\nodeJs\node_global"

输入npm config set cache “你的路径\node_cache” 可直接复制刚刚新建的空文件夹目录：

npm config set cache "D:\nodeJs\node_cache"

③设置环境变量，打开【系统属性】-【高级】-【环境变量】，点击系统变量中的新建：

变量名：NODE_PATH
变量值：你的路径\node_global\node_modules
填写完后依次点完确定即可（告诉系统，下载的模块或者包都在这里了）

④编辑用户变量（环境变量）的 path，将默认的 C 盘下 APPData\Roaming\npm 修改成你的路径\node_global，点击确定：

⑤在Path里面添加NODE_PATH：

⑥ 测试，配置完成后，安装个module测试下，咱们就安装最经常使用的express模块，打开cmd窗口，输入以下命令进行模块的全局安装：

三、下载安装vue脚手架

①管理员权限打开cmd，执行以下命令，全局安装@vue/cli:

npm install -g @vue/cli

中间遇到warning不用管：

②把cmd关掉，然后再用管理员权限打开，切换到要创建项目的目录（无限制，哪个都可以），然后使用命令创建项目：

vue create test

方向键+回车选择vue2：

倒数第三行“successfully”，说明成功创建：

注：因为网比较好所以之前没有把nmp换成淘宝的镜像，如果下载过程持续15min以上建议配置一下淘宝镜像再执行创建，命令是：

npm config set registry https://registry.npm.taobao.org

③启动项目：
依次执行最下方两条蓝色的命令，进入项目目录并启动项目，编译一个事先写好的hello代码。中间可能出现安全中心警报，允许访问即可。完成：

两个地址分别是自己访问和同局域网的其他人访问的地址，在浏览器上输入url即可看到：

项目启动成功！

win10下Vue环境搭建（脚手架初始化+项目启动）教程（详解多图）相关推荐

FMT（基于rtthread）开源代码编译 win10下编译环境搭建及编译
FMT(基于rtthread)开源代码编译 win10下编译环境搭建及编译什么是Firmament? Firmament (FMT) 是一款基于模型设计 (Model-Based-Design, M ...
win10下caffe环境搭建： win10 + vs2013 + caffe + CUDA 7.5 + cudnn v4 + Anaconda2 (python 2.7) 目前未使用GPU
win10下caffe环境搭建: win10 + vs2013 + caffe + CUDA 7.5 + cudnn v4 + Anaconda2 (python 2.7) 目前未使用GPU 最近 ...
大数据单机学习环境搭建(5)Hive建表DDL详解
专题:大数据单机学习环境搭建和使用 1. Hive建表简单示例 1.1.Hive建表语句 1.2.表详细信息 1.3.数据展示 2. Hive建表语法详解 3.拓展1:复杂数据分割 4.拓展2:事务表 ...
python3.5安装教程linux_Linux下安装python3.6和第三方库的教程详解
Linux下安装Python3.6和第三方库如果本机安装了python2,尽量不要管他,使用python3运行python脚本就好,因为可能有程序依赖目前的python2环境, 比如yum!!!!! ...
win10下PHP环境搭建
1.PHP环境搭建的前提是 Apache HTTP Server (Apache 服务器)已经安装部署成功,并可以正常访问到服务器的主页面.Apache HTTP Server 的安装部署已经在上一篇 ...
WIN10 下 Tensorflow 环境搭建
TensorFlow开发环境搭建 1.安装python 2.安装eclipse+pydev插件 3.安装Tensorflow等python插件这里介绍基于eclipse的Tensorflow环境搭建 ...
Vue进阶（十六）：Vue 项目启动原理详解
文章目录一.前言二.文件介绍三.拓展阅读一.前言 vue项目启动后调用顺序: index.html → main.js → app.vue → index.js → components/组件 ...
Win10下OpenCV环境搭建(VS2017+OpenCV3.2.0)
OpenCV: 计算机视觉开源库开发环境搭载: (1) VS2017版本 (2) OpenCV 3.2.0版本 (3)配置环境变量和在VS2017中引入头文件.库文件.连接库. 具体步骤按序如下: ...
mysql linux centos7_MySQL在Linux centos7环境下安装教程详解（图）
这篇文章主要为大家详细介绍了Linux centos7环境下MySQL安装教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 Linux centos7环境下安装MySQL步骤的详细介绍安装My ...

win10下Vue环境搭建（脚手架初始化+项目启动）教程（详解多图）

文章目录

前言

一、下载安装node.js

二、node.js环境配置

三、下载安装vue脚手架

win10下Vue环境搭建（脚手架初始化+项目启动）教程（详解多图）相关推荐

最新文章

热门文章