laravel5.8+vue+element 后台搭建（1）-

2019-10-17 本文已影响0人道翼

这个时间，laravel已经出6了，选择5.8的原因是因为学习接触的laravel社区summer的课程，做完初版后会进行版本升级

vue版本2.5，初版后会再进行cli3的升级

1. 配置本地laravel环境

确保已经安装composer

composer create-project --prefer-dist laravel/laravel blog "5.8.*"

2. 前端依赖安装

确保机器上已经安装了 Node.js 和 NPM。

npm install

3. 添加laravel路由

我放在了admin目录下，路由是在web.php，这个可以根据自己需求更改

Route::get('/', function () { 
     return view('admin/index');
 });

4. 新建 index.blade.php 视图文件，和 Vue 交互

resources/view/admin 目录下新建

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

设置meta标签，官方文档解释说：除了检查 POST 参数中的 CSRF 令牌外， VerifyCsrfToken 中间件还会检查 X-CSRF-TOKEN 请求头。你应该将令牌保存在 HTML meta 标签中，但使用axios请求时会报请求头的错误，之后的文章会进行讲解
app这个是代表的项目根节点，同时页面引入app.js

5. 新建App.vue文件

resources/js 目录下新建，div包裹代码块（vue文件必需）

<template>
        <div>
            <router-view></router-view> <!--路由引入的组件将在这里被渲染-->
        </div>
</template>

<script>
    export default {
        name: "App"
    }
</script>

<style scoped>

</style>

6. 新建Hello.vue文件

resources/js/components 目录下新建

<template>
    <div class="container">
        Hello World
    </div>
</template>

<script>
    export default {
        name: "Hello"
    }
</script>

7. 安装 vue-router

构建项目时，Vue Router 它可以帮助你更好的组织代码，优化路由

npm install vue-router --save-dev

配置 vue-router，在 resources/js 目录下新建目录 config，同时在 config 目录下新建 router.js 文件

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

export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: 'hello',
            path: '/',
            component: resolve => void(require(['../components/Hello.vue'], resolve))
        }
    ]
});

8. 修改app.js文件，渲染组件

import App from './App.vue';
import router from './config/router.js';

window.router = router;
import './config/function.js'

const app = new Vue({
    el: '#app',
    router,                 //使用router
    render: h => h(App)     //加载App.vue文件，也可换成别的vue文件，需在页面import引入
});

9. 编译前端资源，运行

npm run watch

监听资源变化
npm run watch 命令能够在终端持续运行并且监听相关文件的变化。一旦它发现改变，Webpack 将自动重新编译资源，npm run dev只进行一次编译
Lavarel Mix
npm run 命令默认会去执行根目录下的 webpack.mix.js 文件，使用 Laravel 提供的 Laravel Mix 编译资源，并将编译好的资源放在根目录 public 文件夹下，更多可以去查社区文档
编译资源 Mix

10. 访问项目，我本地的虚拟站点

image.png

11. 引入 Element

运行命令

npm i element-ui -S

修改 resources/js/app.js 文件

window.router = router;
import './config/function.js'                        //这是我定义的公共库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';      //最新版更改了目录名字为theme-chalk
Vue.use(ElementUI);

修改 Hello.vue 文件，使用 Element 组件

<template>
    <div class="container">
        Hello World
        <el-button type="text" @click="open">点击打开 Message Box</el-button>
    </div>
</template>

<script>
    export default {
        name: "Hello",
        methods: {
            open() {
                this.$alert('这是一段内容', '标题名称', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${ action }`
                        });
                    }
                });
            }
        }
    }
</script>

运行成功，npm run watch 在命令行界面持续运行编译

image.png

ps: 借鉴了一些laravel5.7+Vue+ Element 环境搭建的知识，如果有其他错误请评论

laravel5.8+vue+element 后台搭建（1）-

猜你喜欢

热点阅读