shunhua's blog

Laravel 和 Vue 的项目搭建

2018-11-02

一、Laravel创建项目

composer create-project –prefer-dist laravel/laravel laravel-vue

二、扩展包

npm install
npm install vue-router iview

三、前端结构搭建
vue前端的文件结构在 /recources/js 目录[laravel5.7],vue能够渲染主要是两个操作

  • vue 挂载到页面的节点中
  • vue-router 处理路由,渲染对应的组件

code流程

  1. 创建 web 路由
    在 /routes/web.php 中新建一个访问我们挂载着vue页面的路由。

    1
    2
    3
    Route::get('/', function () {
    return view('welcome');
    });
  2. 编辑welcome.blade.php
    在 resource/views 新建 welcome.blade.php,代码如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title></title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    </head>
    <body ontouchstart>
    <div id="app">
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
    </body>
    </html>
  3. 修改 /recources/js/app.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    require('./bootstrap');

    // 导入扩展包
    window.Vue = require('vue');

    import App from './components/app.vue'
    import VueRouter from 'vue-router';
    import iView from 'iview';
    import 'iview/dist/styles/iview.css';

    // 导入vue
    Vue.use(iView);
    Vue.use(VueRouter);

    // 路由配置
    const RouterConfig = {
    routes: [
    // ExampleComponent laravel默认的示例组件
    { path: '/', component: require('./components/ExampleComponent.vue') },
    { path: '/bsh', component: require('./components/bsh.vue') },
    ]
    };
    const router = new VueRouter(RouterConfig);

    const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
    });
  4. 建立 Layout
    在 /recources/js/components/ 新建 app.vue, 将 iview 的 layout 代码搬过来:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <style scoped>
    .layout-con{
    height: 100%;
    width: 100%;
    }
    .menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
    }
    .menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
    }
    .collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
    }
    .collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
    }
    </style>
    <template>
    <div class="layout">
    <Layout :style="{minHeight: '100vh'}">
    <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
    <Menu active-name="1-2" theme="dark" width="auto" :class="menuitemClasses">
    <MenuItem name="1-1">
    <Icon type="ios-navigate"></Icon>
    <span>Option 1</span>
    </MenuItem>
    <MenuItem name="1-2">
    <Icon type="search"></Icon>
    <span>Option 2</span>
    </MenuItem>
    <MenuItem name="1-3">
    <Icon type="settings"></Icon>
    <span>Option 3</span>
    </MenuItem>
    </Menu>
    </Sider>
    <Layout>
    <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>
    <Content :style="{padding: '0 16px 16px'}">
    <Breadcrumb :style="{margin: '16px 0'}">
    <BreadcrumbItem>Home</BreadcrumbItem>
    <BreadcrumbItem>Components</BreadcrumbItem>
    <BreadcrumbItem>Layout</BreadcrumbItem>
    </Breadcrumb>
    <Card>
    <div style="height: 600px"><router-view></router-view></div>
    </Card>
    </Content>
    </Layout>
    </Layout>
    </div>
    </template>
    <script>
    export default {
    data () {
    return {
    isCollapsed: false
    };
    },
    computed: {
    menuitemClasses: function () {
    return [
    'menu-item',
    this.isCollapsed ? 'collapsed-menu' : ''
    ]
    }
    }
    }
    </script>
  5. 添加组件
    路由访问的组件会渲染到 app.vue中的[router-view]
    然后修改组件 /recources/js/components/bsh.vue 的内容:

    1
    2
    3
    4
    5
    6
    7
    <template>
    <Tabs>
    <TabPane label="macOS" icon="social-apple">标签一的内容</TabPane>
    <TabPane label="Windows" icon="social-windows">标签二的内容</TabPane>
    <TabPane label="Linux" icon="social-tux">标签三的内容</TabPane>
    </Tabs>
    </template>
  6. 编译运行
    常用的编译命令如下:

    1
    2
    3
    4
    5
    6
    7
    8
    # 本地环境编译
    npm run dev

    # 本地环境编译 + 监控文件修改
    npm run watch

    # 生产环境编译
    npm run prod
使用支付宝打赏
使用微信打赏

欢迎点击上方按钮对我打赏,谢谢你给我吃糖果