Recipe-Box Recipe模块

创建 images 目录，并放置一张图片当做默认图片，最好把 images 目录权限设置为 777（images的路径： public）

20180105174650.png

修改 路由文件 index.js （路径：resources/assets/js/router 下）

import Vue from 'vue';
import VueRouter from 'vue-router';

import Register from '../views/Auth/Register.vue';
import Login from '../views/Auth/Login.vue';

import RecipeIndex from '../views/Recipes/Index.vue';
import RecipeShow from '../views/Recipes/Show.vue';
import RecipeForm from '../views/Recipes/Form.vue';

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {path: '/register', component: Register},
        {path: '/login', component: Login},
        {path: '/', component: RecipeIndex},
        {path: '/recipes/create', component: RecipeForm, meta: {mode: 'create'}},
        {path: '/recipes/:id/edit', component: RecipeForm, meta: {mode: 'edit'}},
        {path: '/recipes/:id', component: RecipeShow}
    ]
});

export default router;

添加 Recipes 文件夹 并在该文件夹下创建 Index.vue 、Form.vue 和 Show.vue （创建Recipes文件夹 的 路径：/resources/assets/js/views）

Index.vue

Form.vue

Show.vue

在 components 文件夹下创建 ImagePreview.vue 和 ImageUpload.vue（路径：/resources/assets/js/components/）

ImagePreview.vue

ImageUpload.vue