Vue入坑记---（1）Vue脚手架安装

介绍

Vue.js是一套构建用户界面的渐进式框架。

Vue只关注图层，采用自底向上增量开发的设计。

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

工具：

node.js环境（npm管理环境）

webpack打包工具

安装node.js

从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。

安装完成后，打开命令行工具输入命令node -v，如果出现对应版本号，就说明安装成功了。

我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v就会显示出npm的版本信息。

到这里node的环境已经安装完了,npm包管理工具也有了，但是由于npm的有些资源被墙，为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。

注意：安装Vue依赖的时候，尽量少用cnpm,因为安装过程中可能丢失东西。

安装webpack

直接在命令行输入：

npm install webpack -g

安装成功后点击webpack -v,出现对应版本号则安装成功。

Vue安装

在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

$ npm install vue

安装vue-cli脚手架构建工具

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

$ cnpm install --global vue-cli

使用vue -v查看vue版本

创建一个基于webpack模板的新项目

vue init webpack 自定义项目名称

注意：如果不想填直接回车默认就好；项目的名称不能大写，不然会报错。

安装项目所需的依赖

npm install

注意：如果一直报错的话，就多次安装依赖

运行项目

npm run dev