Vue node安装

一、安装node

打开官网下载链接:https://nodejs.org/en/download/

下载完成后,双击,即开始安装Node.js 修改好自己安装的路径 其他都默认就可以

Node.js安装完成,可以先进行下简单的测试安装是否成功了,检查node安装是否成功,在git/cmd 工具中输入node -v查看

出现版本号就安装成功

vue node_modules 引用路径 vue node modules安装_git


二、安装npm

npm一般随node一起安装 在电脑中,node如果成功了,npm基本都会没问题

npm的作用就是对Node.js依赖的包进行管理

在cmd输npm -v检查是否安装成功

vue node_modules 引用路径 vue node modules安装_git_02


安装完目录如下:

vue node_modules 引用路径 vue node modules安装_版本号_03

三、环境配置(可以配置也可以不配置)

配置npm安装的全局所在的路径和缓存cache的路径 我希望他们放到一起 不占c盘内存

所以在我希望安装的路径下面建两个空文件夹

node_global和node_cache

vue node_modules 引用路径 vue node modules安装_版本号_04


创建完两个空文件夹之后,打开cmd命令窗口,输入

npm config set prefix “D:\Develop\nodejs\node_global”

npm config set cache “D:\Develop\nodejs\node_cache”

然后去设置环境变量

在【系统变量】下新建【NODE_PATH】,输入【D:\前端学习\nodejs\node_global\node_modules】,将【用户变量】下的【Path】修改为【D:\前端学习\nodejs\node_global】

vue node_modules 引用路径 vue node modules安装_npm_05

vue node_modules 引用路径 vue node modules安装_node.js_06

四、
配置好以后开始安装基于node.js,利用淘宝npm镜像安装cnpm

在git工具中输入: npm install -g cnpm --registry=https://registry.npm.taobao.org 回车 等待就可以
检验是否安装成功: cnpm

五、安装yarn
参考网站: https://www jianshu.com/p/4a225dcacd53
git/cmd工具输入: npm install -g yarn
检验是否安装成功: yarn -v

六、vue安装
git/cmd工具输入: cnpm install vue

七、vue-cli3脚手架工具安装

git/cmd工具输入: cnpm install -g @vue/cli或 者yarn global add @vue/cli

检查其版本是否正确: vue --version 若出现vue信息说明表示成功

vue node_modules 引用路径 vue node modules安装_版本号_07


我安装的是4.4.6 若想安装vue-cli指定版本 使用下面命令

npm install -g @vue/cli@版本号

想卸载vue

npm uninstall vue-cli -g 或 yarn global remove vue-cli八、通过图形界面创建vue项目

git/cmd工具输入: vue ui

创建一个新项目 选择好路径 包管理工具都可以 推荐选择yarn

vue node_modules 引用路径 vue node modules安装_git_08


创建成功 右上角 自定义 添加运行任务

vue node_modules 引用路径 vue node modules安装_vue_09


vue node_modules 引用路径 vue node modules安装_npm_10

点击运行 前往任务页面

vue node_modules 引用路径 vue node modules安装_npm_11


点击启动app

vue node_modules 引用路径 vue node modules安装_版本号_12

vue node_modules 引用路径 vue node modules安装_git_13


出现welcome则表示成功

再退出的切记要control+c终 止vue ui在关掉cmd或者git

九、 大部分还是在vscode中运行项目

:把项目放到vscode里 打开终端 快捷方式 ctrl+`

如果创建的时候包选择是yarn 则输入:yarn serve

如果创建的时候包选择是npm或默认 则输入:npm run serve

vue node_modules 引用路径 vue node modules安装_版本号_14


出现这个则表示成功