node.js安装和配置

下载安装node.js

官网下载最新版本:https://nodejs.org/en/download/

在这里插入图片描述

由于Node.js 中默认安装了 npm,所以不用额外配置就能在全局命令中使用 npm命令,在cmd中测试一下是否安装成功了

输入 node -v 与 npm –v 分别查看版本信息。

配置安装目录和缓存目录

创建默认安装目录和缓存日志目录

比如,我希望将全模块所在路径和缓存路径,放在我node.js安装的文件夹中,则在我安装的文件夹【"D:\Program Files \nodejs】下创建两个文件夹【node_global】及【node_cache】分别作为默认安装目录和缓存日志目录。

在这里插入图片描述

执行命令,将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录

npm config set prefix "D:\JavaApp\NodeJS\node_global"
npm config set cache "D:\JavaApp\NodeJS\node_cache"

npm config get prefix 查看npm全局安装包保存路径

npm config get cache 查看npm装包缓存路径

npm config list查看所有npm 配置

node.js环境配置

说明:以下D:\JavaApp\NodeJS为我的node的安装路径,记得改成你们自己的路径

“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”,进入环境变量对话框

  1. 【系统变量】下新建【NODE_PATH】,输入【D:\JavaApp\NodeJS\node_modules 】
  2. 【系统变量】下的【Path】添加上node的路径【D:\JavaApp\NodeJS\】 一般默认安装的时候就配置了
  3. 【用户变量】下的【Path】添加上 【D:\JavaApp\NodeJS\node_cache】,【D:\JavaApp\NodeJS\node_global】,这是nodejs默认的模块调用路径

配置淘宝镜像源

将npm的模块下载仓库从默认的国外站点改为国内的站点,这样下载模块的速度才能比较快,现在用的都是淘宝镜像源

第一种:直接修改npm的默认配置

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

第二种:安装cnpm

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

验证方式执行cnpm config get registrycnpm config list

在验证 cnpm 的时候可能会出现'cnpm' 不是内部或外部命令,也不是可运行的程序 的问题

为了将全模块所在路径和缓存路径放在node.js安装的文件夹中,之前安装node.js时建立了两个文件夹

node_global

node_cache

D:\JavaApp\NodeJS\node_global 文件夹里可以找到 cnpm.cmd 的文件,从命令提示符进入D:\JavaApp\NodeJS\node_global 文件夹

然后可以执行 cnpm -v 成功,说明需要在【系统变量】的 环境变量的 path 中,添加 D:\JavaApp\NodeJS\node_global 路径。

添加后,重新打开命令提示符,在验证。

安装vue及脚手架

安装vue.js

npm install vue -g或者cnpm install vue -g

根据自己的淘宝镜像源设置选择命令,其中-g是全局安装,指安装到global全局目录去

查看安装的vue信息:npm info vue 或者cnpm info vue

查看安装的vue版本npm list vue

安装webpack模板

在命令行中运行命令 npm install webpack -g ,然后等待安装完成。

webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,

所以还需要安装webpack-cli:npm install --global webpack-cli,安装成功后可使用webpack -v查看版本号。

安装脚手架vue-cli 2.x

npm install vue-cli -g

vue --versionvue -V命令来检查其版本是否正确。

这里顺手安装上vue-router

npm install -g vue-router

vue-cli2创建vue项目

创建项目(最好在cd到D盘的某个位置,即项目的路径,否则项目会新建在C:\Users\Administrator\,也可以直接在想要的项目路径下输入cmd)

 vue init webpack 项目名

项目名不要取中文和大写字母。

Project name(工程名):回车(含大写字母或者中文会报错)
Project description(工程介绍):回车
Author:作者名 :回车
Vue build ==> (是否安装编译器)runtime-compiler、 runtime-only 都是打包方式,第二个效率更高;
Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到路由,所以Y 回车;
Use ESLint to lint your code ==> 是否需要ESLint检测代码,目前我们不需要所以 n 回车;
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车;
Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install
回车;

创建项目成功后就可以cd 项目目录然后执行npm run dev

会给出一个访问路径进行访问项目

结束项目运行:ctrl+c,选择Y即可停止项目的运行。

Logo

前往低代码交流专区

更多推荐