vue官方文档看到：教程=>插槽 ; 指南=>编程式导航

02、先实现静态页面，然后重构以及实现功能

1、搭建sass、scss

百度sass => 安装 => ruby安装 => cmd

2、sass语法

2、编译sass成css => 命令行编译、HBuilder编译scss成css

05 12、环境搭建，路由配置

1、安装

全局安装vue-cli：npm install --global vue-cli

2、创建项目

vue init webpack-simple my-project、vue init webpack my-project

cd到项目：cd my-project
 
安装依赖：cnpm install

运行项目：npm run dev

3、componet创建模块

4、安装vue-router

npm install vue-router save  （在vue-project中安装）

在main.js中引入路由

配置路由的几个步骤

1、引入路由

import VueRouter from 'vue-router';
Vue.use(VueRouter);

2、创建引入组件

import Start from './components/start.vue'
...

3、配置路由

const routes = [
    {path:'/start',component:Start},
    ...
    {path:'*',redirect:'/Start'} //重定向路由
]

4、实例化VueRouter

const router = new VueRouter({
    routes //缩写 属性的简写
})

5、挂载

把router挂载到new Vue({})中

6、需要<router-view></router-view>把放到根组件App.vue中

7、运行npm run dev看配置成功没有

13、重构（静态页面重构成vue），并实现路由跳转

1、assets：静态资源文件，放css、images（把静态写好的赋值一份到assets）

2、App.vue中引入公共css，运行npm run dev看公共css引入成功没有

3、搭建start.vue

复制开始页面的静态html到start.vue中；复制开始页面的css到start.vue中；移动viewport窗口缩放复制到入口文件index.html中

start.vue中的开始点菜：加上<router-link to="home">开始点菜</router-link>跳转

4、搭建Home.vue

复制html、css

ctrl+h批量替换图片地址

5、搭建详情页面

给Home.vue的li列表加上<router-link to="/pcontent"></router-link>

Pcontent.vue的返回按钮加上<router-link to="/home"></router-link>

6、搭建购物车页面

给Pcontent.vue的加入购物车按钮加上<router-link to="/home"></router-link>

7、搭建订单页面

14、侧滑导航、公共底部导航组件并实现显示隐藏（封装公共组件）

侧滑导航：

把home.html静态的js代码复制到Home.vue的methods里的asideDomInit(){...}中，在生命周期函数的mounted(){this.asideDomInit();}触发这个事件

公共底部导航：

底部导航是公共的组件，放在publick文件夹：

1、components => public => 创建NavFooter.vue

2、Home.vue中引入NavFooter组件

3、注册组件 components中注册注册组件

components {
    "v-navfooter":NavFooter
}

4、使用组件

Home.vue中<v-navfooter></v-navfooter>

5、把index_nav.html中代码放到NavFooter.vue中

实现显示隐藏：

v-if = 'flag'

@click = 'flag = !flag'

data() { return falg:false}

复制购物车html代码到Home.vue（购物车也可以封装成一个vue组件）

找到购物车cart.vue中用公共底部导航组件替换掉导航html => 首先在cart.vue中引入NavFooter组件；在components中注册组件；在cart.vue中使用NavFooter组件替换掉导航html部分

15、首页分类数据渲染、首页菜品渲染、配置文件模块化

这个项目的后台管理是koa教程

首页菜品API接口：

请求方式：get

地址：域名/api/productlist => 这里是a.itying.com/api/productlist

实际地址：a.itying.com/productlist

返回参数说明：

参数：说明：备注（无）

_id：分类id

title：分类标题

pid：上级分类id

list：菜品列表（见菜品参数说明）

请求数据有很多模块：Vue-resourse、axios、Fetch、Fetch-jsonp这里我们用Vue-resourse

参考：https://github.com/pagekit/vue-sesource

1、安装Vue-resourse ：在根目录vue-project下安装，cd ../返回上一级目录

cnpm install Vue-resourse --save

2、在main.js中引入Vue-resourse

import VueResourse from 'Vue-resourse';
Vue.use(VueResourse);//Axios不需use

3、Home.vue中请求数据

method中写个请求数据的方法 => requestData(){}

requestData(){
    this.$http.get('http://a.itying.com/api/productlist').then(response =>{
        console.log(response);
    }, response => {
        // error callback
    });
}

这里get请求可能涉及到跨域，可能数据获取不到

4、在mounted中触发 this.requestData()

npm run dev 看拿到数据没有，这里后台允许跨域，所以能拿到数据，如果后台不允许跨域就把get改成jsonp

可以把通过a.itying/api/productlist返回的数据在https://www.bejson.com中去格式化（校验）

菜品参数说明：（如果返回的数据看不懂，可以看这个参数说明）

参数：说明：备注（无）

_id：菜品id

cate_id：分类id

catename：分类名称

title：菜品标题

img_url：图片地址

5、渲染数据（数据渲染完成后再说api接口的封装）

data中定义数据

list:[]

requestData()中赋值

this.list = response.body.result

循环list数据

// 侧滑导航数据渲染
v-for="item in list"  {{item.title}}
// 分类数据渲染
v-for="item in list"  {{item.title}} 
v-for="food in item.list" 
{{food.title}} {{food.price}} <img :src="'http://a.itying.com' + food.img_url"/>

6、封装公共的api接口（封装成模块，请求数据就用这个模块里面的东西）

src中建立model文件夹，model文件夹下建立config.js

var config={
    api:'http://a.itying.com/'
}
export default config;

7、Home.vue中引入配置文件

import Config from '../model/config.js'

data()中定义数据：

api:Config.api

requestData()中：

requestData(){
    var api=this.api+'api/productlist'
    //this  要注意指向
    this.$http.get(api).then(response => {
	    console.log(response);
	    this.list=response.body.result;
    }, response => {
	    // error callback
    });
},

图片地址：

<img :src="api+food.img_url" />

16、详情页传值以及数据渲染

跳转传值 => 跳转传值在vue中常见有两种方式：动态路由、get传值

第一种：动态路由

怎么把静态页面重构成vue