VUE（一）.创建一个VUE Demo示例

今天开始，了解VUE的使用，权当是学习笔记。

本篇是VUE的第一个学习笔记，从VUE的开发环境准备，到第一个Hello VUE的创建完毕，来说起...

1、由于VUE项目依赖于Node.js，因此先要装上Node.js。

安装过程不多说，安装完毕之后，命令行输入： node -v，输出版本信息，表示安装成功；

npm 全名为Node Package Manager，是Node.js 的套件（package）管理工具，npm是集成在node中的，

命令行输入：npm -v就能查看到版本信息。

 

2、安装VUE

          安装vue-cli脚手架构建工具，输入命令： npm install -g vue-cli，安装完成即可。由于npm网站在国内速度非常慢，所以可以在命令后面加上淘宝的镜像，即：npm install -g vue-cli --registry=https://registry.npm.taobao.org

           命令行输入：vue -V 查看到vue 的版本信息，表示安装成功。

3、创建示例项目

       VUE项目创建模版有多个，我们默认选择webpack模式。

      命令行，选好项目创建的路径，输入 vue init webpack projectname 回车，如下：

依次按照提示输入，项目名、项目描述、项目作者等等，一路回车，Yes，然后就是等待项目创建完毕。从截图中可以看到在项目安装之后，会出现To get started:， 提示 进入my-vue项目目录、运行项目。如果是初次创建项目，还会有个npm install,这个命令提示你需要给项目安装依赖。切换路径到项目路径，把淘宝镜像加入到本地镜像中，执行以下命令：

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

  安装完毕后，会出现一个node_modules文件夹。

这个时候，我们就可以运行命令：npm run dev 来启动项目了。等待一段时间，启动完毕之后，浏览器输入 localhost:8080/

就可以看到我们创建的示例Demo了。