貌似有部分人要求写的更详细，这里多写一点vuel-cli基础的配置 什么是vue-cli？
官方的解释是：A simple CLI for scaffolding Vue.js projects，
简单翻译一下，就是： 用简单的命令行来生成vue.js项目脚手架。
vue-cli预先定义了5个模板，根据你使用的打包工具的不同选择不同的模板，通常我们用的都是第一个webpack模板。每个模板都预先写好了很多依赖和基础配置，可以直接在此基础上进行开发，非常方便。
webpack
webpack-simple
browserify
browserify-simple
simple
安装vue-cli后,就可以下载我们要的模板了。
用法：vue init template-name project-name这时会有很多提示，询问你要安装vue2还是vue1，是否要安装mocha，eslint等东西，根据你自己的需要安装即可。安装好后，会提示你怎么开始，根据提示输入命令就可以启动了。
为了适配各种屏幕，首先把淘宝的flexible引进来，在main.js里面
其次，把样式重置也引入进来, App.vue的style标签里面
@import \'./base/css/normalize.scss\'; 这里我有一个问题没有解决，就是开发中我用scss来写mixin，由于很多页面都会用到，所以我希望在App.vue里面引入mixin.scss，好让所以的vue组件都能用，但实际上这样并不起作用；后来又尝试写到main.js里面，不过也没用。目前只能是哪个组件需要用到mixin,就import进来，不过确实有点麻烦。接着，引入字体图标, 在App.vue的style标签里面
@import url(\'//at.alicdn.com/t/font_nfzwlroyg2vuz0k9.css\') 基本配置完成后，接下来分析一下路由怎么写：为了达到上图的效果，我们需要2个基本的组件，一个是购物车，一个是home页面。购物车比较简单，就一个页面，主要看Home页面。
home组件又分成4个组件，一个是底部的导航，还有三个是上面的首页，搜索和个人中心。
也即是说为了达到图片上的效果，目前我们需要总共6个组件。
分别是：
1. 购物车 2. home 2.1 首页 2.2 搜索 2.3 个人中心 2.4 底部导航因此，新建6个.vue文件。为了尽快把路由编写出来，我喜欢随便填充一点内容（主要是为了知道在哪个页面），比如：
<div>首页首页首页</div> <div>首页首页首页</div> <div>首页首页首页</div> <div>首页首页首页</div> <div>首页首页首页</div> 接着编写路由：使用路由首先要引入Vue-router并use，并将配置好路由的vue-router实例挂载到new出来的Vue实例上，不过vue-cli已将帮我们配置好了，只需要在其基础上继续开发就行了。
找到编写路由的index.js文件：
首先引入6个组件：
你可能经常看到@这样的东西，这其实是webpack配置的别名。打开build文件夹下面的webpack.base.conf.js。
你也可以自己再加别名，比如
alias: { ~\': resolve(\'src/component\') }当webpack在import或者require语句中遇到~时，就会将其解析为对应的路径。使用别名可以使得路径更为清晰，也可以减少一些重复的代码。
对比一下：
import car from \'../../component/car.vue\' import car from \'~/car.vue\'不过，使用别名的坏处就是，编辑器没法智能的提示文件所在路径了。
当页面多了以后，打包后的文件会变得很大，大于1M也是很正常的。因此，首屏打开也会变慢，毕竟一下子要加载以M为单位的js文件。想要减少文件的大小，可以把Vue等公共库提取到vendor,从而利用浏览器的缓存效果。同时，也可以让路由按需加载，当需要用到的时候，才去加载对应的组件，利用webpakc的异步加载可以解决：
const Car = r => require.ensure([], () => r(require(\'@/components/car\')), \'car\')也可以像下面这么写：
const Car = resolve => require([\'@/components/car\'], resolve)Vue2.3+的版本提供了更高级的异步组件写法，想了解的可以去官网看一下，这里用的还是旧的用法。