1.首先下载node.js,nodejs官网 https://nodejs.org/zh-cn/download/,根据自己操作系统选择合适的下载

nodejs构建镜像 18版本 node镜像地址查看_npm

2.window 的msi安装包 直接双击点击下一步 下一步就行 安装组件默认npm 和path环境变量都会配置好

 

nodejs构建镜像 18版本 node镜像地址查看_npm_02

3.安装完毕 打开cmd测试 查看node和npm版本

nodejs构建镜像 18版本 node镜像地址查看_ide_03

 

node.js是什么:

 JavaScript大家都知道是在浏览器运行的,Nodejs 是基于 Chrome 的 V8 引擎开发的一个 C++ 程序,目的是在非浏览器下可以实现和浏览器一样运行 JavaScript的效果,基于Google的V8引擎,因为 Google V8引擎执行Javascript的速度非常快,性能非常好。

所以简单理解nodejs就是一个可以运行JavaScript的平台,(感觉和java的jdk有点类似,只有在安装jdk环境后才能运行java程序!)

npm是什么:

npm就是一个软件包管理仓库,目前我们开发中需要的各种组件,工具基本都上传到npm了,我们可以使用npm指令直接下载使用,而不用通过传统的需要什么去网上或者官网下载对应的工具,比如我要需要使用jquery.js 我们登录npm的网站查询

https://www.npmjs.com/  ,使用 npm i jquery指令即可下载jquery到本地项目 (和maven仓库有点类似,只不过maven是用来管理java的jar包的)

nodejs构建镜像 18版本 node镜像地址查看_ide_04

 

 

4.我使用的idea2019.1 ,idea新建一个static web

nodejs构建镜像 18版本 node镜像地址查看_vue_05

5.打开idea的Terminal,测试npm指令是否可用,前提是直接打开cmd时 npm可用,如果提示npm不是可运行的命令之类,查看idea配置的cmd路径是否为C:\Windows\System32\cmd.exe,配置好重启idea,还是无效重启电脑试下。。。

nodejs构建镜像 18版本 node镜像地址查看_nodejs构建镜像 18版本_06

nodejs构建镜像 18版本 node镜像地址查看_npm_07

6.npm可用后执行指令npm i -g cnpm --registry=https://registry.npm.taobao.org

安装淘宝的cnpm,指定淘宝镜像地址,因为npm服务器在国外,受网络影响大,使用淘宝团队的cnpm镜像下载速度会快很多

成功后执行指令cnpm i -g vue-cli 

或者直接把npm地址注册为淘宝的地址

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

配置后可通过下面方式来验证是否成功 

npm config get registry

自带的

nodejs构建镜像 18版本 node镜像地址查看_npm_08

淘宝的

nodejs构建镜像 18版本 node镜像地址查看_nodejs构建镜像 18版本_09

 

 

 

安装vue脚手架,安装完成后执行指令vue -V  测试是否可用

nodejs构建镜像 18版本 node镜像地址查看_vue_10

7.以上步骤只需要执行一次 ,接下来初始我们的vue工程,Terminal切换到工程上级目录 指令cd ..

nodejs构建镜像 18版本 node镜像地址查看_npm_11

执行命令vue init webpack VueDemo01 初始化工程,选项根据情况输入

Project name my-project               --项目的名称,直接默认回车,不能输入大写
Project description A Vue.js project  --项目描述,直接默认回车
Author syf                            --作者姓名,输入名字(syf)回车
Install vue-router? Yes               --是否安装路由,输入y回车
Use ESLint to lint your code? No      --是否用ESLint规范代码,输入n回车
Set up unit tests No                  --是否需要单元测试,输入n回车
Setup e2e tests with Nightwatch? No   --是否需要单元测试,输入n回车

 

nodejs构建镜像 18版本 node镜像地址查看_nodejs构建镜像 18版本_12

8.工程初始化完成后会显示需要执行的命令

(1)根据提示先执行  cd VueDemo01 后执行   npm run dev

nodejs构建镜像 18版本 node镜像地址查看_npm_13

(2)执行完毕可以看到提示 Your application is running here: http://localhost:8080 

 

nodejs构建镜像 18版本 node镜像地址查看_vue_14

(3)浏览器输入http://localhost:8080  看到以下界面说明vue成功创建且启动成功

 

nodejs构建镜像 18版本 node镜像地址查看_npm_15