(window)vue2安装+环境配置

来源:互联网 发布:夏米尔火花机简单编程 编辑:程序博客网 时间:2024/06/17 01:19

前提默认用户已经安装了Node

这里写图片描述

vue2已经包含了webpack插件,不用单独安装webpack


1. 确认Node安装路径
这里写图片描述

2. 以管理员身份打开cmd命令行窗口,进入到Node的安装路径
这里写图片描述

3. 输入 npm install -g cnpm --registry=https://registry.npm.taobao.org进行全局安装,这是淘宝的镜像,速度比npm安装更快
这里写图片描述

检测cnpm是否安装成功:
这里写图片描述

4. 注意安装成功最后的显示信息”C:\Program Files\nodejs\node_global”,这个是cnpm的安装路径,将它添加到系统的环境变量path中。
这里写图片描述


5. 还是在这个路径下cnpm install -g vue-cli,全局安装
这里写图片描述

如果安装成功是这个样子:
这里写图片描述

如果不放心可以退回C盘根目录检测(注意命令中是大写的V)
这里写图片描述

6. 切换到你想要建立项目的目录中,vue init webpack 【projectName】,在【】中自定义保存项目的文件夹名称,”【】”不用输入。并根据提示输入配置选项
这里写图片描述

成功后可以看到工作目录下自动生成了刚才新建的项目文件夹
这里写图片描述

7. 进入到项目文件夹中,输入cnpm install,安装完之后,我们发现项目文件夹下多了一个node_modules目录,里面就是项目依赖包资源
这里写图片描述
这里写图片描述

8. 安装完依赖包之后,就可以运行整个项目了。 运行项目在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
这里写图片描述

加载完成后会自动弹出项目的欢迎页面
这里写图片描述


至此整个安装和配置完成。
PS:搞了一个晚上终于成功,网络上很多这个安装教程,但都没有指出要以管理员身份进入,导致安装不成功,另外安装一定要在node的安装目录下进行,还有就是要将cnpm的所在的文件路径添加到系统环境变量中。否则系统会提示”cnpm 不是系统命令”