npm安装nodejs环境配置

一、概念理解

1、vue.js是前端的一个框架，写出来的都是一个个vue文件，这些文件是浏览器不识别的文件，所以需要以来一种工具把vue文件转换为浏览器可识别的文件

2、webpack就是这个工具，通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

3、webpack打包需要依赖npm，而npm是依赖于Node.js环境的

二、下载安装node

1、NodeJS官网地址

https://nodejs.org/zh-cn/

2、msi版本安装配置

一路下一步就可以了，我选择的安装路径为E:\Program Files\nodejs,安装之后运行cmd,执行node -v 和 npm -v命令查看是否安装成功

3、修改NPM的缓存目录和全局目录路径

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

4、配置系统环境变量(新版本安装next是可以直接选择加入环境变量path)

path加入：D:\Program Files\nodejs\;

5、我们打开cmd命令行界面，在使用命令安装cluster模块，命令如下：

npm install cluster -g
刚才创建的node_global目录，可以看到此时cluster目录就安装到这个目录底下了。

6、更改镜像源

输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

输入命令npm config list 显示所有配置信息，我们关注一个配置文件

C:\Users\Administrator\.npmrc

使用文本编辑器编辑它，可以看到刚才的配置信息

npm的模块下载仓库从默认的国外站点改为国内的站点，这样下载模块的速度才能比较快，只需要一个命令即可，命令是：

npm --registry https://registry.npm.taobao.org install cluster

如果想一直使用这个源的地址，那么可以使用下面这个命令来配置。

npm install -g cnpm --registry=registry_url

registry_url指的是国内提供的一些npm仓库地址，常用的有：
https://registry.npm.taobao.org
http://r.cnpmjs.org/
cnpm 安装完成后，以后就可以用cnpm代替 npm, 此时npm还是会用官方镜像，cnpm会用国内镜像
如果要恢复成原来的设置，执行如下：

npm config set registry https://registry.npmjs.org/

7、查看镜像设置情况

npm get registry 

三、linux下安装配置node.js

1、下载linux的node安装包

NodeJS官网地址
https://nodejs.org/zh-cn/download/
获取安装包

或者wget下载

// 跳转目录
cd /usr/local
// wget下载
wget https://npm.taobao.org/mirrors/node/v12.16.1/node-v12.16.1-linux-x64.tar.xz

2、解压

 // 解压
tar -xzvf  node-v12.16.1-linux-x64.tar.xz
// 修改文件夹名
mv node-v12.16.1-linux-x64 nodejs

node 和 npm 命令都在 nodejs/bin 文件夹下

3、添加环境变量

vim /etc/profile
// 在最下面添加 nodejs 的 bin 目录
export PATH=$PATH:/usr/local/nodejs/bin
// 保存退出编辑器，刷新环境变量
source /etc/profile

4、设置全局安装位置

// 跳转路径到安装位置
cd /usr/local/nodejs
// 新建全局安装文件夹
mkdir node_global
// 新建缓存文件夹
mkdir node_cache
// 设置全局安装路径
npm config set prefix "node_global"
// 设置缓存位置
npm config set cache "node_cache"
// 检查是否设置成功
npm config ls

5、更换镜像源

// 配置国内镜像站
npm config set registry=http://registry.npm.taobao.org

四、创建vue项目

1、安装vue-cli脚手架构建工具

npm安装比较慢，可以使用cnpm镜像

npm install -g cnpm --registry=http://registry.npm.taobao.org

cnpm install -g vue-cli 

安装成功后就可以使用vue命令了

vue  -V

2、构建结构框架

vue init webpack myproject

输入上面命令后，会询问几个选项，根据自己需要填写就可以了。

**Project name** :项目名称，如果不需要就直接回车。注：此处项目名不能使用大写。
**Project description**:项目描述，直接回车
**Author** ：作者
**vue build** 构建方式（暂且这么解释）
*两个选择（上下箭头选择，回车即为选定）*
1.Runtime + Compiler:recommended for most users
*(译：运行+编译：被推荐给大多数用户)*
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files-render functions are required elsewhere
*(译：只运行大约6KB比较轻量的压缩文件，但只允许模板（或任何VUE特定HTML）。VUE文件需要在其他地方呈现函数。翻译不精准，意思大概是选择该构建方式对文件大小有要求)*
*这里推荐使用1选项，适合大多数用户的*
**install vue-router**？是否安装vue的路由插件，需要就选y，否则就n（以下均遵循此方法）
**Use ESLint to lint your code**?是否使用ESLint检测你的代码？
（ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。）
**Pick an ESLint preset**:选择分支风格
*选项有三个
1.standard(https://github.com/feross/standard) js的标准风格
2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github地址说是JavaScript最合理的方法
3.none (configure it yourself) 自己配置*
**Setup unit tests?** 是否安装单元测试（暂不详细介绍）
**Pick a test runner** 选择一个单元测试运行器
*选项有三个
1.Jest（Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架）
2.Karma and Mocha
3.none*
**Setup e2e tests with Nightwatch(Y/n)?**是否安装E2E测试框架NightWatch（E2E，也就是End To End，就是所谓的“用户真实场景”。）
**Should we run 'npm install' for you after the project has been created?***(译：项目创建后是否要为你运行“npm install”?这里选择包管理工具)
选项有三个
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)*
一路回车到此等待安装完毕，会提示接下来的命令行

3、项目启动

# 安装依赖
cd new-project
npm install
#启动项目
npm run dev

这时候在浏览器中打开cmd上显示的地址就可以看到新建的页面。
http://localhost:8081

4、启动成功后可继续安装vue需要的辅助工具

cnpm install vue-router  --save  (路由管理模块)
cnpm install vuex --save  (全局状态管理模块)
cnpm install vue-resource  --save  (网络请求模块)