[今日白学]npm、Vue-CLi 3.x脚手架的安装教程

#今天也是摸鱼的一天#  

本文章仅用作于个人学习笔记（羞耻+1）复制代码

一、Node Package(包) Manager(管理器)

npm:是随同NodeJS一起安装的包管理工具，包的结构使您能够轻松跟踪依赖项和版本。常用的如下:

• 下载可立即使用的独立工具。
  
• 与任何npm用户共享代码。
  

话不多说，我们先安装NodeJS（npm也集成在里面）：

1. 首先从 NodeJs官网 安装（本次安装示例为 64位 Windows版本）
2. 安装NodeJs安装包 ，我们选择把NodeJs安装到 D盘（无脑下一步就好）
3. 安装完成后 目录 会有以下文件
4. 进入终端(CMD)查看是否正常

node -v        查看Node版本

npm -v         查看npm版本

echo %PATH%    查看系统变量复制代码

   5.更改 全局模块存放路径 由于我们把NodeJs安装在了D盘 ，为了方便管理也把npm的本地仓库路径（默认安装在C盘）更改到 D盘   （这里需要在D:\nodejs目录下创建一个空的node_global文件夹）

npm config set prefix "D:\nodejs\node_global"      设置全局模块存放路径

npm config set cache "D:\nodejs\node_cache"     设置缓存文件夹

npm list -global        查看本地全局安装的包（查看是否更改路径成功）

npm install -g cnpm --registry=https://registry.npm.taobao.org    安装 淘宝NPM​镜像 (cnpm) 以提升速度（npm是从国外服务器下载，受网络影响大，可能出现异常）
复制代码

因为我们已经更改了vue脚本的global路径，需要向path环境变量中添加全局模块的目录路径

添加global目录路径到path环境变量中

npm config list         显示所有配置信息​复制代码

二、Vue-CLi 3.x脚手架

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，你可以专注在撰写应用上，而不必花好几天去纠结配置的问题，Vue CLI提供：

• 通过 @vue/cli搭建交互式的项目脚手架。
  
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发
  

我们可以根据 Vue-CLi官方提供的文档 进行安装

   1.安装Vue-CLi包

cnpm install -g @vue/cli        用cnpm(淘宝镜像)安装Vue-CLi脚手架的包到全局目录下复制代码

   2.检查其版本是否正确

vue --version        检查其版本是否正确 (3.x)复制代码

   2.创建一个项目

vue create hello-world        创建一个名为 hello-world 的项目复制代码

cd hello-world      进入项目文件夹
npm run serve       启动本地开发环境复制代码

 http://localhost:8080/     打开浏览器进入复制代码

目录结构如下复制代码