安装Nodejs，配置vue环境

安装Nodejs，配置vue环境

Nodejs v16.14.0

一、安装nodejs

1、下载

下载地址：https://nodejs.org/zh-cn/download/

2、安装

xz -d node-v16.14.0-linux-x64.tar.xz
tar -xvf node-v16.14.0-linux-x64.tar
mv node-v16.14.0-linux-x64 node-v16.14.0

3、配置

在nodejs安装目录（根目录）下新建两个目录：
1>. node_global  # 全局包下载存放
2>. node_cache  # node缓存

Mac:

# mac不用做修改
# 它们的两个目录设置如下，记住就行
$ npm config get cache
/Users/wsongl/.npm
 
$ npm config get prefix 
/usr/local

Linux:

cd /usr/local/node-v16.14.0
mkdir node_global
mkdir node_cache
npm config set prefix "/usr/local/node-v16.14.0/node_global"
npm config set cache "/usr/local/node-v16.14.0/node_cache"

Windows:

windows配置（node安装在目录 C:\nodejs）：

1. 新建node_global node_cache 目录；

2. 执行命令；

### 二选一即可
# 方式一：
npm config set prefix "C:\nodejs\node_global"
npm config set cache "C:\nodejs\node_cache"

# 方拾二：
# 在nodejs的安装目录中找到 node_modules\npm\.npmrc 文件，修改如下：
prefix =C:\nodejs\node_global
cache = C:\nodejs\node_cache

4、环境变量

Mac:

# mac不用做修改
node /usr/local/bin/node
npm /usr/local/bin/npm

Linux:

vim ~/.bash_profile

export NODE_HOME=/usr/local/node-v16.14.0
export PATH=$PATH:$NODE_HOME/bin:$NODE_HOME/node_global/bin
export NODE_PATH=$NODE_HOME/node_global/lib/node_modules

source ~/.bash_profile

Windows:

# 环境变量中修改：
# 这次nodejs安装在了D盘，发现PATH下的变量，bin都不需要加！
【系统变量】下新建【NODE_PATH】，输入【C:\nodejs\node_global\lib\node_modules】
【用户变量】下的【Path】修改为【C:\nodejs\bin;C:\nodejs\node_global\bin】

5、验证

node -v
npm -v

二、安装cnpm

原淘宝镜像（registry.npm.taobao.org）停止解析公告：https://zhuanlan.zhihu.com/p/465424728

官方地址（新）：https://npmmirror.com/

### 安装方式如下，二选一即可
# 方式一，安装cnpm：
npm install -g cnpm --registry=https://registry.npmmirror.com

# 方式二，alias方式引用：
echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npmmirror.com \
  --cache=$HOME/.npm/.cache/cnpm \
  --disturl=https://npmmirror.com/mirrors/node \
  --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc

三、npm常用命令

npm install -g [email protected]  # 升级npm到8.5.2版本

npm install express -g      # -g是将模块安装到全局

npm install list

npm install ls -l 

npm config get registry

npm config set registry https://registry.npm.taobao.org --global  # 设置全局镜像地址

npm config set disturl https://npm.taobao.org/dist --global

npm install种--save --save-dev区别：

https://www.cnblogs.com/limitcode/p/7906447.html

四、安装yarn

 Yarn是facebook发布的一款取代npm的包管理工具。

安装：npm install -g yarn
查看版本：yarn --version

  

五、yarn常用命令

参考：

https://blog.csdn.net/yw00yw/article/details/81354533

https://www.cnblogs.com/longkui-site/p/15856888.html

yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

六、安装vue

参考：https://www.cnblogs.com/hoaprox/p/14176747.html

如果是安装3以下版本的脚手架，命令npm install -g vue-cli@版本号
如果是安装3以上版本的脚手架，命令npm install -g @vue/cli@版本号

1、vue2

安装
npm install -g vue       # 安装vue2，直接装命令行工具脚手架即可，可不装
npm install -g vue-cli   # 安装vue-cli，命令行工具脚手架
npm uninstall -g vue-cli # 卸载vue2

新建项目
vue init webpack vue2_demo
cd vue2_demo
npm install; npm run build   # 打包
npm run dev                  # 运行

vue2新建项目说明：

Project name：项目名称
Project description：项目描述
Author：作者
Vue build：打包方式（standalone和runtime）,按回车选择默认的就好
Install vue-router?：是否安装路由？肯定是需要用到的，按 y 回车
Use ESLint to lint your code?：是否启用eslint代码检测规则？目前不需要，按 n 回车
Setup unit tests with Karma + Mocha?：是否进行单元测试？目前不需要，按 n 回车
Setup e2e tests with Nightwatch?：是否进行端对端测试？目前不需要，按 n 回车

2、vue3

安装
npm install -g vue@next    # 安装vue3，直接装命令行工具脚手架即可，可不装
npm install -g @vue/cli    # npm安装命令行工具脚手架
yarn global add @vue/cli   # yarn安装命令行工具脚手架
npm uninstall -g @vue/cli  # 卸载vue3

新建项目
vue init webpack vue3_demo     # 方式一
vue create vue3_demo           # 方式二，该命令也可以创建vue2的
npm init vue@latest            # 方式三，这一指令将会安装并执行create-vue脚手架
cd vue3_demo
npm install; npm run build     # 打包
npm run serve                  # 运行

# 创建旧版vue2项目
npm install -g @vue/cli-init  # 第一次时安装
vue init webpack vue2_demo

七、安装vite

官网：https://vitejs.cn/

vite脚手架介绍，有利于理解vite-app 和webpack区别：https://blog.csdn.net/zemprogram/article/details/109403787

https://www.cnblogs.com/zhazhanitian/p/14422086.html

只支持vue3

1、安装

 安装vite-app脚手架，和vue/cli类似。

npm install -g create-vite-app

2、使用vite安装vue3.0项目

npm使用

# 创建 方式一
npm init @vitejs/app vue3_demo （推荐）
# 创建 方式二(问题：修改vite.config.js后，npm run dev一直不通过)
create-vite-app vue3_demo

cd projectName
# 安装项目依赖
npm install
# 运行项目
npm run dev
# 打包
npm run build

yarn使用

# 创建 方式一
yarn create vite-app vue3_demo
# 创建 方式二
yarn create @vitejs/app vue3_demo
cd vue3_demo
npm install (or `yarn`)
npm run dev (or `yarn dev`)