vue.js相关环境搭建

1.      在官网下载并安装node.js，在直接安装就行无需配置；

Node.js是 javascript运行环境(runtime),可以让不同系统直接运行各种编程语言

npm包管理器，是集成在node中的，安装完之后打开命令行，     输入npm –v和node –v进行验证

2.      安装淘宝npm镜像；即cnpm

Npm是Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像（http://npm.taobao.org/）

在命令行中输入npm install -gcnpm --registry=http://registry.npm.taobao.org然后等待

完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。

3.      安装vue-cli脚手架构建工具；输入vue进行验证环境

在命令行中运行命令npm install -g vue-cli，然后等待安装完成。通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

vue init webpackfirstVue

建好的目录如下：

开发中我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，打开package.json可以看到，其中devDependencies下即为所有依赖（可以自定义添加依赖）

5．cnpm install；默认版本是最新的

6. 安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。安装完依赖包之后，就可以运行整个项目了。

7. 在项目目录中，运行命令npm run dev，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

这里简单介绍下npm run dev命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是node build/dev-server.js命令的一个快捷方式。

运行成功后：

打开http://localhost:8080，即可看到

webpack-dev-server

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应。

webpack-dev-server有两种模式支持自动刷新——iframe模式和inline模式

·    在iframe模式下：页面是嵌套在一个iframe下的，在代码发生改动的时候，这个iframe会重新加载

·    在inline模式下：一个小型的webpack-dev-server客户端会作为入口文件打包，这个客户端会在后端代码改变的时候刷新页面

使用iframe模式，无需额外配置，只需在浏览器输入

http://localhost:8080/webpack-dev-server/index.html

 

使用inline模式有两种方式：命令行和nodejs API

1. 命令行：在运行时，加上 --inline 选项

$webpack-dev-server --inline

访问，通过http://localhost:8080 就可以访问

2. nodejs API 方式，需要手动把webpack-dev-server/client?http://localhost:8080 加到配置文件的入口文件处

webpac-dev-server支持Hot ModuleReplacement，即模块热替换，在前端代码变动的时候无需整个刷新页面，只把变化的部分替换掉