搭建Laravel5.6 + Vue2.5.7项目

将'/'导向index.blade.php

在index.blade.php中

1、设置csrf_token

2、创建一个挂载点，<div id="app"></div>

在resource/asset/js/app.js中

// 先把项目自带的demo引入
import example from './components/ExampleComponent';

// 利用render在#app上渲染这个组件
const app = new Vue({
    el: '#app',
    render: h => h(example)
});

执行npm run watch 或者npm run dev编译

这样vue文件就渲染ok了。

2、引入element-ui等前端框架

npm i element-ui -S // 安装Element-ui

引入element-ui及其主题

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

修改Example.vue 文件，使用Element-ui的组件，修改为

<template>
    <div>
        <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
        <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

这时已经可以看到前端框架样式了；

下面配置路由的history模式

app.router.js配置

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

Vue.use(VueRouter);

export default new VueRouter({
    mode: 'history',
    base: __dirname,
    linkActiveClass: 'active',
    routes: [
        {
            path:'/home',
            component: require('./home/Main'),
            // children : [
            //     {
            //         path:'/home/blog',
            //         component: require('./home/Main')
            //     }
            // ]
        },
        {
            path:'/blog',
            component: require('./blog/Main'),
            // children : [
            //     {
            //         path:'/home/blog',
            //         component: require('./home/Main')
            //     }
            // ]
        }
    ]
})

到这里还不够，需要在laravel路由中继续配置

// 开启history模式，添加一条通配路由，当为404时，走此路由，可解决问题
Route::get('{path?}', 'Home\HomeController@index')->where('path', '[\/\w\.-]*');

配置SaaS编译，首先安装依赖，在laravel-mix中配置，定义引入路径。

mix.js('resources/assets/js/app.js', 'public/js').extract(['vue']).version().webpackConfig({
   resolve: {
       alias : {
           Sass: path.resolve(__dirname, 'resources/assets/sass'),
       }
   }
});

遇到的问题：

vue Uncaught ReferenceError: webpackJsonp is not defined at app.js:1

这里在index.blade.php中按顺序引入：manifest，vendor即可，如下：

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

配置完成。

搭建Laravel5.6 + Vue2.5.7项目

2、引入element-ui等前端框架

猜你喜欢