安装Vue运行环境与项目生成

      周六，加班的时间，说是加班不如说是学习的时间，因为来得比较晚，而且很随意，感觉一天啥都没做就快下班了。几个月都是在写后台的接口，对于js、jQuery感觉都需要花时间重新温习了，同事们还有机会渲染页面，装数据，可惜了，在Vue的世界里面我才刚开始，所以今天学习了一波Vue于是在这里记录一下，便于下次接着学习。其实在BaiDu、Google、Bing上入门的博客已经很多了，而且也很详细，但是毕竟自己入门，亲自尝试一次也算是长记性。

一、vue认识

vue.js是一个是对JavaScript进行封装的渐进式前端框架，目前越来越多的项目实现了前后端分离的架构模式，为Vue的使用提供了契机。引自Vue官网的介绍【Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。】

二、关于vue

      关于vue配套的相关工具

1. vue.js ：  核心
2. VueRouter2 ：实现路由组织工具。
3. webpack ：项目打包以及编译工具。
4. nodejs ：前端开发环境。
5. npm ：前端包管理器。
6. axios ：ajax 接口请求工具。
7. sass-loader 和 node-sass ：css 预处理。
8. element ：基于  vue 的后台组件库。
9. iview ：基于  vue  的另一套后台组件库。
10. vue-cli ：vue  项目脚手架。一键安装 vue 全家桶的工具。

三、目录认识

（1）node_modules：存放项目使用的依赖包资源。

（2）build：项目最终发布资源。

（3）config：所有的配置。

（4）src：我们开发的主要文件资源，包括assess(资源包)官网下载的把logo放在里面了，components(演示的组件资源)我们                    自己也可以在里面尝试Demo，App.vue(项目入口文件，可以自行改造)，main.js(核心配置文件)全局配置也在这里。

（5）static：静态资源的存放位置，包括图片、字体。。。

（6）test：初始测试目录

（7）index.html：项目的主页

（8）package.json ：项目配置文件（管理本地的npm包）

（8）README.md：git版本管理服务文件

四、安装必备工具

1、node.js 前端开发环境（npm包管理器）

在node.js官网下载安装：https://nodejs.org

查看是否安装成功：

npm（Node Package Manager）包管理器是集成在node.js里，npm可以解决node.js的很多部署问题，包括 ：

(1)允许用户从NPM服务器下载别人编写的第三方包到本地使用；

(2)允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用；

(3)允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

也就是下载、安装、上传以及管理已经安装的包。

所以在node.js安装成功后可以直接检查是否安装：

2、如果下载安装包的时候比较慢或者有些资源会被屏蔽掉，我们还可以下载淘宝镜像：

地址：npm install -g cnpm --registry=http://registry.npm.taobao.org 

3、安装Vue的脚手架vue-cli

在命令行中运行命令 ：cnpm install -g vue-cli 

脚手架功能安装成功之后，可以使用webPack（项目构建工具）构建一个初始化项目，命令：vue init webpack firstVue

生成项目的文件目录：

node_modules目录：存放所有下载的依赖资源

亲测了一下：在初始化创建项目的时候就已经下载，不过也有示例在初始化项目之后使用：cnpm  install 

安装依赖包。

4、运行系项目

进入项目目录：

npm run dev  命令中的  run  对应  package.json 中的：

运行成功界面：

访问一波：