Vue.js脚手架的安装及使用

---

更多关于Vue.js的系列文章请点击：Vue.js开发实践(0)-目录页

---

Vue.js是一款由国人开发的流行前端js框架，为了更快速地开发，我们需要安装一些开发环境和脚手架。

一、VUE脚手架介绍

Vue 提供了一个官方的 CLI，为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

简单地说，Vue脚手架能够快速为我们搭建开发环境。

使用脚手架的好处：

1. 脚手架是通过webpack搭建的开发环境

2. 使用ES6语法，在低版本的浏览器中会转换为ES5去兼容

3. 打包和压缩js为一个文件

4. 项目文件在环境中编译而不是在浏览器中，这样的话访问速度更快

5. 实现页面自动刷新，即修改实时生效

二、VUE脚手架的安装

2.1、安装node.js

从node官网下载并安装node：node.js下载
安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了。

2.2、安装cnpm

cnpm是淘宝NPM镜像，一个用于下载依赖的工具。
直接在命令行中输入

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

等待安装完成后，输入cnpm -v则可查看其是否安装成功

2.3、安装vue

在用 vue.js 构建大型应用时推荐使用 npm 安装，npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。
在命令行中使用cnpm安装vue

cnpm install vue

通过vue -V查看是否安装成功：

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

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

$ cnpm install --global vue-cli

三、创建基于webpack模板的项目

3.1、创建过程

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用：

$ vue init webpack my-project

my-project为自定义项目名

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

需要注意的是项目的名称不能大写，不然会报错。

进入初始化好的项目当中，下载项目所需的依赖：

$ cnpm install

下载好依赖后，在项目中使用cnpm运行项目，默认打开的是localhost:8080端口运行项目

$ cnpm run dev

3.2、项目结构

3.3、src文件

• asset:存放图片字体

• component：存放组件的文件夹

• App.vue：根组件

• main.js：最重要的一个文件，在里面导入了VUE和根组件App.vue