用vue-cli、webpack、vue-router构建单页应用

• vue-cli:一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目
• webpack:是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源

• vue-router:SPA单页应用必备路由模块（下面详细介绍）

        1.搭建环境

            搭建环境之前，你需要在本地安装node.js,npm是node.js的包管理器，用于node插件管理(包括安装、卸载、管理依赖)等，会随着node的安装而自动安装。但是因为npm安装插件是从外国的服务器下载，受网络影响大，可能出现异常。所以国内的淘宝团队在npm的基础上，为我们提供了强大的cnpm包管理工具。              

 cnpm安装                                                                                                                                                                              

 安装cnpm：npm install cnpm -g --registr=https://registry.npm.taobao.org

            测试cnpm是否安装：cnpm -v，下图表示安装成功。

               cnpm和npm的用法一致，但凡用到npm的地方，使用cnpm代替即可，下载速度会提升一个档次！

接下来执行以下命令：

全局安装webpack

        全局安装vue脚手架

            

创建vue项目

执行vue init webpack myVueStudy

            

安装项目相关依赖工具

cnpm install

cnpm run dev   启动该项目

大功告成，项目已成功启动，浏览器会自动为我们打开一个页面，这就是我们将要开发的项目主页面。见下图

2.项目文件结构

打开我们创建的myVueStudy项目，项目目录如下

src目录结构如下

分别看下app.vue和main.js两个重要文件

app.vue            main.js

3.开始开发

vue脚手架为我们构成的vue.app文件中的img和router-view,没啥卵用，删除即可。我们在该文件中引入三个一级路由，定义一些样式，我们在src目录下面创建一个pages目录，用于创建自定义组件（一个个页面）。static目录下面创建一个css目录和data目录，分别用来存放css样式和数据。文件目录如下

引入路由、轮播图插件(安装组件 npm install vue-awesome-swiper --save)

编写过后的app.vue文件如下(主页面中的路由定义)

效果图

在使用vue-cli webpack构建项目的过程中，要注意以下一些方面

• 要在引用组件之前通过命令行cnpm install <组件name>来全局安装这些组件
• vue组件中，template需要有一个根元素，否则控制台会报错
• 一级路由会了，二级路由就很简单