nodejs vue环境

新版node-v14.15.0-x64.msi

npm install -g npm-upgrade


npm install webpack --save-dev // 安装成功之后,会有提示再安装一遍 webpack-cli
 
npm install webpack-cli --save-dev


或者
执行: npm install webpack@^4.5.0 -D

或者删掉项目里的package.json和node_modules包 ,重新执行npm install  
linux没权限时
npm i --unsafe-perm   
或
npm install node-sass --unsafe-perm=true --allow-root

打包  npm run build     npm run build:dep   报表npm run build uat

Vue环境搭建及node安装过程整理

遇到的问题 npm run build或者install没反应

  1. npm config rm proxy

  2. npm config rm https-proxy

  3. 把C:\Users\{账户}\下的.npmrc文件....删掉

  4. 从新

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

一、nodejs的安装

Node.js安装包及源码下载地址为:Download | Node.js

nodejs_download

我们可以根据不同平台系统选择你需要的Node.js安装包。Node.js 历史版本下载地址:Index of /dist/

这里演示的是Window64位安装Node.js,下面演示的是采用安装包的方式来安装。

1、Windows 安装包(.msi)

 Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录,并点击 next(下一步):

install-node-msi-version-on-windows-step4   

:点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):

 安装完之后启动cmd依次执行以下两条命令检测是否安装成功,结果如下:

 二、node.js的环境变量的新建。  //我安装的路径是 D:\soft\nodejs

    其实安装完node,就自动在path里增加环境变量,但是为了以后的本地部署项目,我们需要找到node.js的安装根目录,在当中新建“node_global”和"node_cache"两个文件夹。

1、 启动cmd依次执行以下两条命令

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

2、 设置环境变量

  说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径

  1.鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。

  2.点击环境变量弹出下列对话框:

  3.新增系统变量NODE_PATH:把变量值设置成“D:\soft\nodejs\node_global\node_modules” (这样就可以把后面全局安装的装到global里并且可以直接用命令使用。)

4. 修改用户变量PATH:选中PATH,点击编辑,把“D:\soft\nodejs\node_global;”加到前面

三、安装淘宝的npm镜像

  输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

  这个其实看个人爱好吧,因为npm在国内下载速度是很慢,所以就用npm下载安装cnpm可以更快的下载后面的依赖等等。

四、安装全局vue-cli脚手架、webpack

命令输入

  cnpm install vue –g  //全局安装vue

  cnpm install -g vue-cli                        //全局安装vue-cli

  cnpm install -g webpack                          //全局安装webpack

       cnpm install -g webpack-dev-server             //安装webpack的本地webserver

  安装完成后,vue-cli脚手架其实就已经把vue也装掉了,所以只需输入vue  -V 和 webpack  -v  等等就可以查看安装成功与否。

 下面是以上命令的结果:

$ npm install vue -g

E:\nodejs\node_global
`-- vue@2.4.4


$ npm install -g vue-cli

E:\nodejs\node_global\vue-init -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
E:\nodejs\node_global\vue-list -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-list
E:\nodejs\node_global\vue -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue
E:\nodejs\node_global
`-- vue-cli@2.9.1
  +-- async@2.5.0
  | `-- lodash@4.17.4
  +-- chalk@2.1.0
 .....  此处省略很多结果数据 .....


$ npm install webpack -g

E:\nodejs\node_global\webpack -> E:\nodejs\node_global\node_modules\webpack\bin\webpack.js
> uglifyjs-webpack-plugin@0.4.6 postinstall E:\nodejs\node_global\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
E:\nodejs\node_global
`-- webpack@3.7.1
  +-- acorn@5.1.2
  +-- acorn-dynamic-import@2.0.2
 .....此处省略多行数据.......
  
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})


$ npm install -g webpack-dev-server

E:\nodejs\node_global\webpack-dev-server -> E:\nodejs\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js
E:\nodejs\node_global
+-- UNMET PEER DEPENDENCY webpack@^2.2.0 || ^3.0.0
`-- webpack-dev-server@2.9.1
  +-- ansi-html@0.0.7
  +-- array-includes@3.0.3
.....此处省略多行数据......

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN webpack-dev-server@2.9.1 requires a peer of webpack@^2.2.0 || ^3.0.0 but none was installed.
npm WARN webpack-dev-middleware@1.12.0 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none was installed.

linux切换nodejs

Node.js的版本管理器

我们虽然可以利用Linux发行版软件源来直接安装Node.js,但通常只能安装到比较旧的版本,而且也不能随时进行版本的切换。这对于开发或是运行需要特定的Node.js版本才能运行的Node.js程序来说是不太方便的,所以选择使用Node.js的版本管理器是很重要的。最常用的版本管理器有「nvm」和「n」两个。

nvm是使用POSIX-compliant shell脚本制作的Node.js版本管理器,它可以取得各种合适的Node.js版本并根据不同的Node.js版本创建出独立的运行环境。

n是使用Bash脚本制作的Node.js版本管理器,它可以取得各种合适的Node.js版本,并且可以在同一个环境下进行Node.js版本的切换。如果我们只是想要快速升级Node.js的版本,且对于不同Node.js版本间所使用的设置和全域套件并无独立需求的话,n会比nvm还要更简单易用,而本篇文章也是以n来做Node.js的安装及管理示范。

n

n虽然是Node.js的版本管理器,但官方并没有提供一个便利的方式来安装n。这让许多人会用npm去安装n,就会造成很诡异的问题,因为npm需要Node.js运行环境才能被运行,那么在一开始还没有n的时候,Node.js要该哪里取得比较好?

所幸有其它开发者注意到n的问题,替它开发了基于Bash的安装脚本,称为n-install。以下是它的GihHub链接:

GitHub - mklement0/n-install: Installs n, the Node.js version manager, without needing to install Node.js first: curl -L https://bit.ly/n-install | bash

安装n和Node.js

借由n-install脚本,运行以下指令就可以安装最新的n和Node.js (Active LTS)。

curl -fsSL https://git.io/n-install | bash -s -- -y

linux-install-nodejs

n和Node.js的东西都会被安装到家目录下的n目录中。此时我们可以打开新的终端机或是在现有的终端机上运行source ~/.bashrc来套用新的环境变量,就可以开始使用nnodenpm等指令了!

由于n-install脚本会将N_PREFIX环境变量设为家目录下的n目录,因此全域套件都会被放置在~/n/lib/node_modules下。在管理全域套件或是更改Node.js的版本时,不使用sudo指令。

用n来安装最新的Node.js和npm

在终端机运行以下指令就可以安装最新的,即当前正在积极开发的Node.js和npm:

n latest

linux-install-nodejs

用n来安装指定版本的Node.js和npm

使用以下指令可以查看所有Node.js的版本。

n ls-remote --all

linux-install-nodejs

若想要安装指定的Node.js版本,只要在n这个指令后直接接上版本号码就好了,例如要安装18.18.2,指令为:

n 18.18.2

不过一般我们不太需要去管修订版本号,甚至是次版本号。所以如果想要直接安装「Node.js 18.x最新版」,指令可以直接写成:

n 18

切换Node.js的版本

n会把不同的版本的Node.js放在不同的文件目录中,我们可以直接运行以下指令来查看先前已经安装过哪些版本的Node.js。

n

linux-install-nodejs

当要安装的Node.js版本,n先前已经安装过的话,n只会纯粹做切换,而不会重新再通过网络下载文件。

清理Node.js

由于n会把不同的版本的Node.js放在不同的文件目录中,因此时间一久,在不断更新下,系统环境会累积很多已经用不到的旧版Node.js。使用以下指令,可以将非目前正在使用的Node.js版本全部移除:

n prune

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值