认识和初始化安装

vue是什么？是一个前端框架

node.js：运行JavaScript的运行环境，本质是tomcat和响应的管理器。

npm：node.js下的包管理器

webpack:用来将组建，如***.vue组建打包翻译成.js文件，被浏览器解析。

vue-cli:用来创建模板的vue工程，通过该工程，创建vue工程项目，然后再该工程里创建前端界面，最后编译，打包成js文件，然后再被浏览器解析。

一、安装node.js

windows系统，安装node.js ,到官网下载http://nodejs.cn/

node.js直接安装到系统，node.js自带npm管理器，但有可能不是最新的。

安装完成后，找到命令行工具，以管理员身份打开。

进入如下界面

前两行不是默认的命令

二、更新npm、安装必要的组件

1、更新npm到最新版本 npm update -g（防止因为版本问题，报错）

备注：更新node.js 需要两个命令

命令： npm install -g n

             n latest

2、更换组件地址，为淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org（因为国外网速很慢，且有可能访问不到）

（备注：很多人说cnpm有很多的bug，因此建议使用npm  install  --registry=https://registry.npm.taobao.org）

3、安装webpack，用来打包，翻译vue组件的插件

cnpm install webpack -g

4、安装创建模板的vue工程插件

cnpm install vue-cli -g

三、创建前端工程

vue init webpack my-project（最后这个是项目的文件夹名称）

之后会选择多个配置选项，包括，项目名称，作者，还有校验，测试等。

生成的项目

四、进入到项目中，安装项目依赖

进入到工程目录

d:

cd npm

cd helloWorld(创建的项目名称)

安装依赖项

npm install 载入会比较慢

cnpm install vue-router  vue-resource  --save（如果之前没有更改组件地址为淘宝地址，则使用npm）

npm run dev(启动项目)

经过一系列的加载，没有错误后，结果界面如下

端口号默认是8080，因为我本地项目占用了，所以自动分配为8081

在浏览器输入localhost:8080,得到如下界面

至此，启动成功。