搭建Laravel5.6 + Vue2.5.7專案
阿新 • • 發佈:2018-12-18
將'/'導向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\[email protected]')->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>
配置完成。