laravel使用vue进行后台管理的环境搭建

最新推荐文章于 2024-03-11 21:47:16 发布

SF梅花糕

最新推荐文章于 2024-03-11 21:47:16 发布

阅读量1.4k

点赞数

分类专栏： laravel 文章标签： larvel+vue后台管理

本文链接：https://blog.csdn.net/weixin_42265596/article/details/102533864

版权

laravel 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言：小编的自学笔记，适合于新手，大神不喜勿喷
vue的相关知识了解----熟悉vue的可以跳过这一步
1.挂载
Vue创建的是spa(单页面)项目，一个项目仅在一个web页面中完成,也可以理解为一个项目就是一个vue实例，也就是通过new Vue()语句创建的对象。然后把这个实例放在HTML中显示出来，这就是挂载
new Vue({
// el是实例挂载点，会将根组件替换掉原文档中id为 app 标签
el: ‘#app’,
// 通过render函数渲染
render: h => {
// 这里App是根组件
h(App)
}
})
参考：https://www.jianshu.com/p/b8d1578d1027
2.vue的目录结构
在vue中有那么几个比较目录至关重要下面就来简单的介绍一下
在这里插入图片描述
index.html
提供一个 div 给 vue 挂载

main.js
main.js是vue的入口js文件, 在main.js 中，引入了 vue、App 和 router 模块，创建了一个 Vue 对象，并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下，并绑定了一个路由配置。
在这里插入图片描述
App.vue
main.js 把 App.vue 模板的内容，放置在了 index.html 的 div 标签下面。 App.vue 里的内容是待放置内容的 router-view，router-view里面说的内容在你访问路由的时候会被渲染上去。

Index.js
是路由的配置文件，规定了路由访问的具体信息
在这里插入图片描述
也可以在main.js中设置路由,像这样
// import VueRouter from ‘vue-router’//引用路由模块
// //使用当前路由
// Vue.use(VueRouter)
// //配置路由
// const router=new VueRouter({
// routes: [
// {
// path: ‘/’,
// name: ‘loginLink’,
// component: Login
// },
// {path:’/home’,name:‘homeLink’,component:Home}
//
//
// ],
// mode:‘history’,
// })
然后再new vue()中绑定路由配置
new Vue({
el: ‘#app’,
router,
参考：https://www.cnblogs.com/xifengxiaoma/p/9493544.html

准备条件
安装ElementUI
npm i element-ui -S
安装 vue-router
npm install vue-router --save-dev
安装 axios
npm install --save vue-axios

laravel构建vue目录

1.创建index.blade.html.
像index.html一样可以提供一个 div 给 vue 挂载的页面，这里我们在view下新建一个index.blade.html.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Larvuent</title>
</head>
<body>
<div id="app"></div>
<script src="../js/app.js"></script>
</body>
</html>

放置的的是加载的内容，引入vue的入口js,文件相当于上面的main.js

2.修改app.js
import App from ‘./App.vue’;
import Vue from ‘vue’
import router from ‘./router/index.js’;
//引入element-ui
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)
//引入axios
import axios from ‘axios’
import VueAxios from ‘vue-axios’
Vue.use(VueAxios, axios)
const app = new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
});

3.在js下创建router/index.js
在这里插入图片描述
在配置路由之前我们要先新创建两个vue文件，内容随便写一点就好，用户后面的页面切换
配置路由

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

import Hello from '../components/test.vue'
import Hello2 from '../components/WelcomeComponent.vue'
export default new VueRouter({
 
    routes: [
        {
            name: 'hello',
            path: '/hello',
            component:Hello
        },
        {
            name: 'hello2',
            path: '/',
            component:Hello2
        }
    ],
    mode:'history'
});

在配置路由的时候小编出现export ‘default’ (imported as ‘App ‘) was not found的错误解决的办法是
在这里插入图片描述
给vue的路由做路由匹配
一步很关键，网上很多教程在配置路由的时候是直接配置跟路由，一开始小编这样配置是没错的但是在配置其他路由并访问的时候404,这是因为web.app 路由里没有做匹配。
修改routes/web.php 文件。
Route::get(’/{any}’, ‘SpaController@index’)->where(‘any’, ‘.*’);
创建SpaController控制器
在这里插入图片描述
参考：https://segmentfault.com/a/1190000020457104?utm_source=tag-newest

4.创建app.vue
在这里插入图片描述

<template>
    <div>
        <h1>Vue Router Demo App</h1>

        <p>
            <router-link :to="{ name: 'hello' }">Home</router-link> |
            <router-link :to="{ name: 'hello2' }">Hello World</router-link>
        </p>

        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {}
</script>

到这一步我们就配置好了可以使用ElementUI，和vue-router的环境
运行：npm run dev
输入配置好的域名
在这里插入图片描述

关于axios的使用
在api.php下创建接口

Route::get('/test',function(){
    return json_encode(['res'=>'datatest']);
});

设置监听事件在这里插入图片描述
运行：npm run dev

参考：https://www.jianshu.com/p/1c2cc11ba46f
https://www.jianshu.com/p/f9045ebc5b6a

SF梅花糕

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
laravel使用vue进行后台管理的环境搭建

前言：小编的自学笔记，适合于新手，大神不喜勿喷vue的相关知识了解----熟悉vue的可以跳过这一步1.挂载Vue创建的是spa(单页面)项目，一个项目仅在一个web页面中完成,也可以理解为一个项目就是一个vue实例，也就是通过new Vue()语句创建的对象。然后把这个实例放在HTML中显示出来，这就是挂载new Vue({// el是实例挂载点，会将根组件替换掉原文档中id为 app...
复制链接

扫一扫