vin7 安装vue教程(一路都是泪)

安装了一天才安装成功,一路上参考了很多博客,没有找到一个走到底的,下面是我结合其他博客和我一路的实践整理出来的。
安装流程:
一、安装Node.js(类似java中的Tomcate)
1、下载地址:https://nodejs.org/en/download/

官网最新是到了 14.15.1版本了,但是我是win7系统不支持,只能在历史版本中下载。
在这里插入图片描述
在最下面找到历史版本点开。
在这里插入图片描述
我选择了win7可以安装的最新版本13.14.0,点击Downloads。
在这里插入图片描述
这里可以选择压缩版和安装版,我选择了安装版版本。
在这里插入图片描述
左边为压缩版,右边为安装版,最后的文件都是一样的。
在这里插入图片描述
2、安装版流程
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201203170037231.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODcyNzcz,size_16,color_FFFFFF,t_70
在这里插入图片描述
选择自己安装路径,我的安装路径为D:\vue\nodejs
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
等待一会…,安装成功
在这里插入图片描述
二、配置path环境变量(便于全局使用node、npm等命令,不需要到安装目录下使用)
1、计算机>>属性>>高级系统设置>>环境变量>>用户变量,找到path进行编辑后,在最前面添加
D:\vue\nodejs;(这儿添加你自己安装的node目录,记得用英文状态‘;’间隔开)
在这里插入图片描述
2、校验是否安装成功,命令node -v、npm -v
执行命令;

node -v
npm -v

在这里插入图片描述
三、修改默认下载位置及缓存位置
1、在nodejs的安装目录下,新建node_global和node_cache两个文件夹,我的安装目录为“D:\vue\nodejs”
在这里插入图片描述
2、设置global和cache
执行命令:

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

3、
3、配置淘宝镜像并检查

npm config set registry=http://registry.npm.taobao.org
npm config get registry

在这里插入图片描述
4、安装淘宝镜像
执行命令:

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

在这里插入图片描述
四、配置path和NODE_PATH环境变量
1、配置path环境变量
计算机>>属性>>高级系统设置>>环境变量>>用户变量,找到path进行编辑后,在最前面添加
"D:\vue\nodejs\node_global";(覆盖之前添加的"D:\vue\nodejs")
在这里插入图片描述
2、配置NODE_PATH环境变量
计算机>>属性>>高级系统设置>>环境变量>>系统变量>>新建
变量名为:NODE_PATH
变量值为:D:\vue\nodejs\node_global\node_modules
在这里插入图片描述
3、从新打开cmd命令框,校验环境变量是否成功
执行命令:

node -v
npm -v
cnpm -v

在这里插入图片描述
五、安装vue
1、执行命令:

cnpm install vue -g

在这里插入图片描述
2、执行命令:

cnpm install vue-cli -g

在这里插入图片描述3、执行命令

npm install -g webpack

在这里插入图片描述
4、校验vue-cli是否安装成功(V大写)
在这里插入图片描述
六、创建vue项目
1、我的项目放在:D:\vue\vueProject下,需要切换目录到vueProject目录下执行命令:
执行命令:

vue init webpack mytest

在这里插入图片描述
直接回城键继续执行,执行完时间有点久。
在这里插入图片描述创建的mytest项目结构如下:
在这里插入图片描述
2、安装项目依赖,切换到mytest项目文件下
执行命令:

cnpm install

在这里插入图片描述
安装完成之后,会在我们的项目目录mytest文件夹中多出一个node_modules文件夹,这里边就是我们项目需要的依赖包资源。
在这里插入图片描述
七、运行vue项目,在项目mytest下执行命令
1、执行命令:

npm run dev

在这里插入图片描述
在这里插入图片描述2、通过浏览器访问:http://localhost:8080(注意提示的端口信息)
在这里插入图片描述
出现以上界面则安装vue成功。
八、vue编辑器下载
下载链接:https://www.dcloud.io/hbuilderx.html
在这里插入图片描述
解压直接使用

https://www.cnblogs.com/mankii/p/14837914.html

参考链接:https://blog.csdn.net/li1325169021/article/details/100765894

  • 6
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值