手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）

vue-cli

webpack

vue-router

vue-resource

vue-cli

:一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目

webpack

:是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源

vue-router

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

vue-resource

:SPA单页应用资源访问模块,类似于Jquery中的$.ajax

1.搭建环境

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

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

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



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

接下来执行以下命令：

cnpm install -g webpack



cnpm install -g vue-cli



进入目标目录，执行vue init webpack myVueStudy



cnpm install



cnpm run dev



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

2.项目文件结构

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



src目录结构如下



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

3.开始开发

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



编写过后的main.js文件如下



编写过后的app.vue文件如下



当我们点击

router-link to="/html"

,时，html.vue会映射（展现）到

router-view

视口中，如下图



好了，到这里，简单的一个vue-cli项目框架已搭建完成，其中运用到了

vue-router

路由模块，

vue-resource

网络请求模块，

vue-awesome-swiper

轮播图组件，github上面还有很多拿来可用的组件，有兴趣可以自己尝试下。

最终效果图如下，不会制作gif动图。会的朋友告诉我下呗！



在使用

vue-cli

webpack

构建项目的过程中，要注意以下一些方面

- 要在引用组件之前通过命令行cnpm install <组件name>来全局安装这些组件

- vue组件中，template需要有一个根元素，否则控制台会报错

- 一级路由会了，二级路由就很简单，可以自行百度学习下

该文章纯手工制作，有不对的地方，还请指出。大家共同进步，