vin7 安装vue教程（一路都是泪）

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

官网最新是到了 14.15.1版本了，但是我是win7系统不支持，只能在历史版本中下载。

在最下面找到历史版本点开。

我选择了win7可以安装的最新版本13.14.0，点击Downloads。

这里可以选择压缩版和安装版，我选择了安装版版本。

左边为压缩版，右边为安装版，最后的文件都是一样的。

2、安装版流程

选择自己安装路径，我的安装路径为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、配置淘宝镜像并检查

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

vin7 安装vue教程（一路都是泪）相关推荐

第一步：安装VUE教程
http://www.cnblogs.com/binmengxue/p/6831850.html 整理: 1.node -v 命令:查看node的版本,若出现相应的版本号,则说明你安装成功了. 2.n ...
ads2019安装教程win10 ads2019安装破解教程 ads安装助手辅助安装
学习目标: 看ads2019安装教程轻松解决在win10电脑上完成ads2019安装学习内容: 安装ads2019所需要的环境看ads2019安装教程执行操作关键地方不要选错 ads安装助手辅助 ...
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细) 目录一.安装Node(npm)需要的环境和版本发布信息 (1).Node版本和npm版本关系 (2).支持 ...
饥荒怎么自动订阅服务器,饥荒Mod订阅及安装图文教程两种途径都可以
原标题:饥荒Mod订阅及安装图文教程两种途径都可以 <饥荒>添加Mod可改变游戏玩法或是功能,使其更有趣味性,不过具体的安装步骤很多玩家还不知道,今天小编带来<饥荒>Mod订 ...
Vue入门教程：node安装vue命令行工具及启动项目
安装淘宝npm镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 全局安装vue命令行工具 cnpm install - ...
npm——安装教程、安装vue脚手架(ASP.NET Core微服务(五)——【vue脚手架解析接口】过度章节)
npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题. 比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并 ...
mac 安装vue全网最详细教程
1.安装vue: 下载安装包(选择macOS 安装包 (.pkg):下载 | Node.js 中文网直接点击下载包一直无脑点下一步安装查看版本号,检测是否安装成功:npm -v 2.安装cnpm: ...
Vue2学习笔记1 - win10下安装vue开发环境
操作系统为Win10_x64 1.安装NodeJs Vue的安装依赖NodeJs,所以需要先安装NodeJs,去NodeJs官网(http://nodejs.cn/download/)下载对应系统的n ...
如何在Window下安装node\npm\cnpm，并安装vue.js，创建项目
1.安装node.js node.js的官方地址为:https://nodejs.org/en/download/. 根据windows版本后,选择要下载的安装包,下载完毕,按照windows一般应用 ...

vin7 安装vue教程（一路都是泪）

vin7 安装vue教程（一路都是泪）相关推荐

最新文章

热门文章