Recipe-Box Recipe模块

创建 images 目录,并放置一张图片当做默认图片,最好把 images 目录权限设置为 777(images的路径: public)


Recipe-Box Recipe模块_第1张图片
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




你可能感兴趣的:(Recipe-Box Recipe模块)