Vue2.0仿外卖APP（四）

组建拆分

先在static目录下引入reset.css

接着在index.html引入，并且设置移动端<meta>,viewport的

有时候由于eslint的检测功能,写js少一个冒号多一个空格都会频繁报错,这会让刚接触Vue或者对ES6不熟悉的人痛苦不堪,可以在上一节讲到的eslint相关配置处,把对应检测功能置零

如果不置零,下面这段代码就会报错:

所以要到eslintrc.js去设置

现在的App.vue如下：

然后我们编写组件来替换那三个区块。

创建header组件

将header引入到App.vue里面(注册)：

Components后面要有空格。

这里还要安装一个stylus-loader依赖，不然会报错。

这里提供一个依赖包的安装方法：到package.json，在里面添加所需要的最新版本的包，然后再cnpm install ，这样就可以添加到node_modules里面了，运行cnpm run dev。

基本的组件结构如下:

Vue-router

因为在单页应用中，内容区块有三部分，所以这时候要用到路由vue-router

http://router.vuejs.org/zh-cn/installation.html

同样通过package.json来安装。

vue-router的用法：http://router.vuejs.org/zh-cn/essentials/getting-started.html

可以参考下面两个链接:

官网的写法：http://router.vuejs.org/zh-cn/essentials/getting-started.html

参考：https://segmentfault.com/q/1010000007929093/a-1020000007929260
(PS: 链接都是个人觉得在遇到困难时很好的解决思路,所以放上来供大家参考)

如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)。在通过use()这个方法，相当于安装插件。

参照官网给的vue-router的过程：

// 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
// 现在，应用已经启动了！