从零初始化一个Vue项目【vue环境搭建】

版权声明:版权:cometang--唐家世少所有 https://blog.csdn.net/qq_39005315/article/details/83146241

【nvm +node + npm + vue-cli 】完成vue项目初始化过程
后期可以自行安装和使用webpack模板初始化vue项目
Node.js NPM安装方式
1.直接使用安装包进行傻瓜式单击安装,此方式比较简单不推荐 后期更改node版本不方便

2.nvm (node.js 版本管理器)

2.1 下载地址 : https://github.com/coreybutler/nvm-windows

在这里插入图片描述

2.2 单击download now

在这里插入图片描述

2.3 下载
在这里插入图片描述
2.4 解压
在这里插入图片描述

2.5 在C盘根目录新建
2.6 在nvm文件夹下新建一个 settings.txt 的文本文档
在这里插入图片描述

2.7 在setttings.txt 中去添加代码,配置下载的node地址,版本等
在这里插入图片描述
注意npm的下载地址图片上面配置出错了,应该是:npm_mirror:http://npm.tao.org/mirrors/npm/
2.8 配置环境变量
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

nvm 配置安装完成
3.开始下载node.js

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用:nvm use 版本号 //切换node.js的当前使用版本
查看文件目录结构:已经成功
在这里插入图片描述

在这里插入图片描述

Node.js版本切换
在这里插入图片描述

nvm命令
nvm list 查看所有安装的node版本
nvm off 关闭nvm的功能
nvm on 打开nvm的功能

npm命令
npm -v 查看npm版本
npm init 初始化一个npm包
npm install 安装在线包
npm uninstall 卸载已安装包
npm info 查看安装包信息
npm list 查看本地已安装包列
npm show 查看安装包信息
npm run ? 运行定义脚本

更改下载的连接
在这里插入图片描述

如果这一步报错
在这里插入图片描述
解决方式:
在环境变量中新增 NPM_HOME C:\dev\nvm\npm
在path 变量的最前面加上: ;%NPM_HOME%;
在这里插入图片描述

在这里插入图片描述

  1. npm 安装vue
    4.1初始化包

在这里插入图片描述
4.2 下载安装包
在这里插入图片描述

查看新建的项目文件夹
在这里插入图片描述
查看 package.json 文件

在这里插入图片描述

npm命令
npm list -g 查看npm之前安装的所有的包
npm list -g --depth 0 查看npm安装的全局包
npm install vue-cli -g 全局安装 vue-cli 也就是vue开发的脚手架
npm install vue --save 安装vue --save(同时安装vue的依赖)
npm config list 查看npm 的下载的地址链接

更改npm下载的连接到淘宝的连接上
npm config set regestry http://registry.npm.taobao.org

猜你喜欢

转载自blog.csdn.net/qq_39005315/article/details/83146241