一、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流程
创建 web 路由
在 /routes/web.php 中新建一个访问我们挂载着vue页面的路由。1
2
3Route::get('/', function () {
return view('welcome');
});编辑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>修改 /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
29require('./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)
});建立 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>添加组件
路由访问的组件会渲染到 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>编译运行
常用的编译命令如下:1
2
3
4
5
6
7
8# 本地环境编译
npm run dev
# 本地环境编译 + 监控文件修改
npm run watch
# 生产环境编译
npm run prod
赏
使用支付宝打赏
使用微信打赏
欢迎点击上方按钮对我打赏,谢谢你给我吃糖果