VUE下载及安装

  1. 下载node.js
    node.js下载 ,选择长期维护版在这里插入图片描述
  2. 安装NODE,直接全部默认,不要安装在C盘
  3. 设置NODE
    在nodejs安装路径下,新建node_global和node_cache两个文件夹,这是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以创建,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。一般放在了 node的安装目录下
    在这里插入图片描述
    创建完两个文件夹之后,打开cmd窗口
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

设置环境变量,关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
在【系统变量】下新建【NODE_PATH】,输入【D:\Program Files\nodejs\node_modules】,将【用户变量】下的【Path】中的【C:\Users\用户名\AppData\Roaming\npm】修改为【D:\Program Files\nodejs\node_global】
在这里插入图片描述
在这里插入图片描述
更改npm的镜像以及安装cnpm,因为npm的原镜像是在国外,使用起来可能会很慢,所以需要更改到国内的淘宝镜像

npm config set registry https://registry.npm.taobao.org
查看命令为 npm config get registry

安装cnpm包管理器(可不安装,不建议使用cnpm)

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装VUE

npm install vue -g      # -g  是全局安装的意思

安装完成后检查确保vue安装在了全局模块目录:
在这里插入图片描述
安装vue-cli(已废弃,vue-cli高版本已更名为@vue/cli)

npm install -g vue-cli(高版本已弃用)
npm install -g @vue/cli

安装webpack及webpack-cli

npm install -g webpack
npm install -g webpack-cli
创建新项目(已废弃,vue-cli创建项目的方法)
新建project文件夹,进入project目录下。通过webpack模板创建新项目,假设新项目名称为test01:vue init webpack test01

接下来的提示根据情况选择默认值或选择yes ,no
在这里插入图片描述
创建完成后如下图所示:
在这里插入图片描述

根据提示,进入test01目录,通过命令npm run dev启动示例,在浏览器中输入地址:http://localhost:8080,即可看到示例页面
在这里插入图片描述
Ctrl+C可停止服务器实例,至此 VUE环境已搭建完成

创建新项目(@vue/cli创建项目)
操作命令:vue create vue-test01 根据提示,一步步完成即可
  • 8
    点赞
  • 63
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值