【vue|webpack|npm】初识

本文主要介绍：
- nodejs和npm安装
- 热更新

---

nodejs和npm安装

VUE是一个javascript的前端框架，注定了它是运行在浏览器里的，对服务器本地没有任何要求，只要一个静态文件服务器能通过http访问到其资源文件就足矣！为了开发方便，本地使用nodejs实现静态文件服务器，npm随同nodejs一起安装的包管理工具，能解决nodejs代码部署上的很多问题，如：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

node和npm安装的过程

1.安装
详细参考菜鸟教程：https://www.runoob.com/nodejs/nodejs-install-setup.html
注意:

选择Add to Path 就会有npm了。

2.改变原有的环境变量（参考：https://www.cnblogs.com/yominhi/p/7039795.html）
(1)我们要先配置npm的全局模块的存放路径以及cache的路径，在NodeJs下建立”node_global”及”node_cache”两个文件夹，输入以下命令改变npm配置

npm config set prefix "安装的绝对路径\nodejs\node_global"
npm config set cache "安装的绝对路径\nodejs\node_cache"

(2)在系统环境变量添加系统变量NODE_PATH，输入路径：
安装的绝对路径\nodejs\node_global\node_modules
此后所安装的模块都会安装到改路径下
(3)在命令行输入以下命令试着安装express（注：“-g”这个参数意思是装到global目录下，也就是上面说设置的“D:\Program Files\nodejs\node_global”里面。）

npm install express -g

安装完毕后可以看到.\node_global\node_modules\express 已经有内容

(4)在命令行输入node进入编辑模式，输入以下代码测试是否能正常加载模块：

require('express')

假设成功，可以看到有输出。假设出错，检查NODE_PATH的路径。

3.安装cnpm

(1)输入以下命令

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

(2)输入cnpm -v输入是否正常，这里肯定会出错。

cnpm -v

(3)添加系统变量path的内容
　　因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。
　　

热更新

参考：https://blog.csdn.net/qq_16559905/article/details/54177581
方案二易使用，可行。
安装完后，端口设置可能不一致，需要再package.json 中设置端口

"scripts": {
    "dev": "webpack-dev-server --inline --hot --quiet --port 8081",
    "build": "webpack"
  },

之后在浏览器中访问
localhost:8081 回车