手把手教你用vue-cli、webpack、vue-router

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安装

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

接下来执行以下命令：

• cnpm install -g webpack

全局安装webpack

• cnpm install -g vue-cli

全局安装vue脚手架

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

创建vue项目

• cnpm install

安装项目相关依赖工具

• cnpm run dev

启动项目

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

项目自动生成页面

2.项目文件结构

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

myVueStudy项目目录

src目录结构如下

src结构目录

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

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视口中，如下图

html.vue组件，包含轮播图、资源访问

---

好了，到这里，简单的一个vue-cli项目框架已搭建完成，其中运用到了vue-router路由模块，vue-resource网络请求模块，vue-awesome-swiper轮播图组件，github上面还有很多拿来可用的组件，有兴趣可以自己尝试下。

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

效果图

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

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

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