node.js与npm安装，使用vue-cli脚手架从0开始快速搭建一个demo

一、安装node.js（自带npm低版本安装）

1、官网下载node.js
https://nodejs.org/en/

2、双击文件，进行安装 ，除了可以更换一下安装目录，基本上一路next：

• 在这里可以更换一下目录，比如此处我安装在 D:\webTools\nodejs
  

• 红框处默认安装npm，我们这里什么都不动，直接点next
  

3、（可选）安装程序完成后，检查

• 打开刚才设置的安装目录 D:\webTools\nodejs，可以看到目录结构
  

• cmd查看环境变量 echo %PATH%
  在结果里可以找到
  D:\webTools\nodejs\;
C:\Users\stablemesotheca\AppData\Roaming\npm
  或者说出现 node 和 npm 即可
• cmd查看Node.js版本号 node.js -v
  
  node.js为最新稳定版本
• cmd查看自带安装的 npm版本号 npm -v
  自带的npm并非最新版本

4、设置环境
(1) 设置全局目录，设置到安装目录下

npm config set prefix "D:\webTools\nodejs\node_global"

(2) 设置缓存目录，设置到安装目录下

npm config set cache "D:\webTools\nodejs\node_cache"

（系统盘c盘的用户目录的node_global的文件夹可以删除，留着也没影响）

• （可选）可以使用 npm list -global查看全局目录（node_global）中的模块，此时未安装任何模块，查看为空

(3) 环境变量PATH添加D:\webTools\nodejs\node_global（否则，安装完vue会找不到启动路径）

配置完环境变量，cmd要关闭重新打开才有效

(4) 配置镜像源，加速以后的模块下载

npm config set registry=http://registry.npm.taobao.org

• （可选）检查配置信息

  ①配置信息

  npm config list
  

  

  或者打开C:\Users\stablemesotheca.npmrc这个配置文件，可以看到刚才的配置信息

  ②检查镜像站是否正常

  npm config get registry
  

  

  ③检查能否通过镜像站获得模块（比如vue）信息

  npm info vue
  

  
  5、更新npm模块

• 安装/更新模块命令

  npm install 模块名 -g
  

  npm install ：安装/更新执行命令
  npm uninstall ：卸载
  -g：表示安装到global目录下

更新npm

npm install npm -g

版本更新至6.14.7
（安装完后再次执行 npm list -global 可以看到刚安装的npm模块）

三、安装vue及组件

安装vue.js

npm install vue -g

如果安装了没版本号，可以换成

npm install vue-cli -g

• 查看vue版本号，确认安装配置成功 p.s. v要为大写，否则报错

  vue -V
  

安装vue-router

npm install vue-router -g

安装vue脚手架

npm install vue-cli -g

四、快速构建一个vue

选择一个地方准备开始建一个vue项目（此处我选择D:\webProject作为根目录）
cmd 进入根目录，执行初始化一个vue工作空间，此处我起名为myvue，项目名称设置为vuedemo

vue init webpack vueDemo

init 是为了生成package.json文件，里面有描述项目的信息。

Runtime选择默认第一个即可。

选项都是为了快速新建一个小demo，实际开发按照需要配置。

进入项目目录——myvue，使用npm install安装依赖
npm install根据package.json里的模块信息生成依赖。

运行项目npm run dev
提示项目已经启动，复制项目地址，打开浏览器，输入即可访问项目主页

五、打包及项目结构

• 如果要打包部署，ctrl+c停止后执行命令npm run build可以生成静态文件，部署得到的dist文件夹即可。
  【dist : distribution（最终发布产品）】
  

• 使用工具打开项目，也可以在控制台这里输入命令

• 项目结构说明

build 可以配置loading动画/删除创建目标文件夹/webpack编译;输出信息/配置静态资源路径/配置webpack等；
package.json 配置名称/版本/许可证等元数据；可以配置依赖模块（dependencies）；可以指定运行脚本命令的npm命令行缩写（scripts字段）
static存放mock数据，其他类型如json/xml的文件;
src</>目录存放源代码：

六、其他vue插件

进入项目文件夹，安装axios和elementUI

npm install axios vue-axios element-ui --save

格式化时间日期的moment.js

npm install moment --save