laravel + vue 创建后台+开始到结束

男娘i 2022-03-10 12:15 552阅读 0赞

## **搭建过程** ##

注意:这里要去报你本地已经安装好了composer

**1.新建 Laravel5.5 项目**  
在 Web 服务器目录下，使用 Composer 建立laravel新项目

composer create-project --prefer-dist laravel/laravel Larvuent // 新项目名为 Larvuent

Larvuent 安装完成后，执行

cd Larvuent  //进入项目目录

**2.安装前端依赖库**  
进入 Larvuent 项目后，执行

npm install // 速度慢的请自行切换淘宝镜像 cnpm(百度搜索 'npm淘宝镜像' )

3.在web.php路由文件中,修改路由

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

**4.新建 Hello.vue 文件**  
在 resources/assets/js/components 目录下新建 Hello.vue 文件

<template> 
    	<div>
            <h1>Hello, Larvuent!</h1>
            <p class="hello">{
       { msg }}</p>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                msg: 'This is a Laravel with Vue and Element Demo.'
            }
        }
    }
    </script>
    
    <style>
    .hello {
        font-size: 2em;
        color: green;
    }
    </style>

**5.修改 app.js 文件，渲染组件**  
修改 resources/assets/js/app.js 文件

require('./bootstrap');
    
    window.Vue = require('vue');
    // Vue.component('example', require('./components/Example.vue')); // 注释掉
    import Hello from './components/Hello.vue'; // 引入Hello 组件
    const app = new Vue({
        el: '#app',
        render: h => h(Hello)
    });

**说明：app.js 是构建 Vue 项目的主文件，最后所有的组件都会被引入到这个文件，在引入所有组件之前，bootstrap.js 文件做了一些初始化的操作。同时，因为有了 `window.Vue = require(‘vue’)` 这句话，就不再需要使用 `import Vue from ‘vue’` 重复导入 Vue 了。**

**6.新建 Laravel 视图文件，和 Vue 交互**  
在 resources/views 目录下新建 index.blade.php 文件

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

**说明：你可能在其他教程中看到有的在使用 assets 函数，这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的，如果现在还不明白，不要紧，你记得使用 mix 函数就好了，然后继续往后看。**

**7.编译前端组件，运行**

执行以下命令，编译前端资源

npm run dev

该命令默认会去执行根目录下的 webpack.mix.js 文件，使用 Laravel 提供的 Laravel Mix 编译资源，并将编译好的资源放在根目录 public 文件夹下。

**说明：前端编译工具有许多，比如 gulp、webpack 等等，Laravel 也为自己提供了开箱即用的编译工具，比如 Laravel5.3 及更早版本提供基于 gulp 的 Laravel Elixir 和从 Laravel5.4 开始提供基于 webpack 的 Laravel Mix，当然你也可以不使用官方提供的工具，自己去配置编译工具。这些编译工具的作用都是一样的，使用方法也大同小异。前面说过，本文第一次安装尽量简单，能运行即可，所以不再去配置前端编译工具，使用官方提供的即可。**  
访问项目

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70]到目前为止，Laravel + Vue 已经完成了，下面开始引入 Element。  
**8.引入 Element**  
执行命令，安装 ElementUI

npm i element-ui -S

修改 resources/assets/js/app.js 文件

import Hello from './components/Hello.vue'; // 引入Hello 组件
    import ElementUI from 'element-ui'; //这里已经直接引入所有的Element,其中的方法都可以直接额拿过来使用,不用再去单独加载
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

**9.修改 Hello.vue 文件，使用 Element 组件**  
修改 resources/assets/js/components/Hello.vue 文件为

<template> 
    		<div>
    	        <h1>Hello, Larvuent!</h1>
    	        <el-button @click="visible = true">按钮</el-button>
    	        <el-dialog v-model="visible">
    	            <p>欢迎使用 Element</p>
    	        </el-dialog>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                visible: false
            }
        }
    }
    </script>
    
    <style>
    .hello {
        font-size: 2em;
        color: green;
    }
    </style>

**10.再次编译前端资源，运行**

npm run dev

访问项目，点击按钮  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70 1]好了，到目前为止，Laravel5.5 + Vue2 + Element 的环境搭建已经完成了，为了方便理解，第一次的搭建过程尽量简洁。本文下面的部分将使用 Vue 路由等等，逐步完善，便于后期的开发。

## 完善 CSRF 防护 ##

环境搭建完成后，访问项目，打开开发者模式，切换到 Console ，会看到以下报错  
![在这里插入图片描述][20190311001223255.png]Laravel 为了避免应用遭到跨站请求伪造攻击(CSRF)，自动为每一个有效用户会话生成一个 CSRF 令牌，该令牌用于验证授权用户和发起请求者是否是同一个人。

**修改 resources/views/index.blade.php 文件为**

注:创建一个 meta 标签并将令牌保存到该 meta 标签中，问题可解决。

# 使用 Vue Router #

构建大型项目时，使用 Vue Router 将是一个好的方式，它可以帮助你更好的组织代码，优化路由。  
**1.安装 vue-router**  
执行命令，安装 vue-router

npm install vue-router --save-dev

**2.配置 vue-router**  
在 resources/assets/js 目录下新建目录 router ，同时在 router 目录下新建 `index.js` 文件

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

**3.引入 vue-router**  
在 resources/assets/js 目录下新建 App.vue 文件

<template> <div>
            <h1>Hello, {
       { msg }}!</h1>
            <router-view></router-view> 
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                msg: 'Vue'
            }
        }
    }
    </script>
    
    <style>
    </style>

修改 resources/assets/js/app.js 文件为

// import Hello from './components/Hello.vue';
    import App from './App.vue';
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-default/index.css';
    Vue.use(ElementUI);
    import router from './router/index.js';  
    
    const app = new Vue({
        el: '#app',
        router,
        render: h => h(App)  //将Vue的App.vue文件挂载到index.blade.php的id='app' 的文件中
    });

**4.重新编译**

npm run dev

通过路由访问 hello 组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70 2]以后如果要添加组件，只需在 `resources/assets/js/components` 目录下新建 vue 文件，在 `resources/assets/js/router/index.js` 文件里引入，然后就可以通过路由访问了。

# 代码拆分 #

代码拆分是将一些不经常变动的代码提取出来，以避免每次都要重新编译，如果你频繁更新应用的 JavaScript，需要考虑对 vendor 库进行提取和拆分，这样的话，一次修改应用代码不会影响 vendor.js 文件的缓存。

Laravel Mix 的 extract 方法可以实现这样的功能：

修改项目根目录下的 webpack.mix.js 文件

mix.js('resources/assets/js/app.js', 'public/js')
       .sass('resources/assets/sass/app.scss', 'public/css')
       .extract(['vue','axios']);

extract 方法接收包含所有库的数组或你想要提取到 vendor.js 文件的模块，使用上述代码作为示例，Mix 将会生成如下文件:

public/js/manifest.js  // Webpack manifest runtime
    public/js/vendor.js  // vendor 库
    public/js/app.js  // 应用代码

同时修改 resources/views/index.blade.php 文件为

<!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="{
       { mix('js/manifest.js') }}">
        </script> <script src="{
       { mix('js/vendor.js') }}"></script> 
        <script src="{
       { mix('js/app.js') }}"></script> 
        </body> 
    </html>

全局的 mix 函数会根据 public/mix-manifest.json 中的路径去加载对应的文件，同时也要注意引入三个 js 文件的顺序，以避免出错。

重新执行命令，就可以了。

npm run dev

总结

到目前为止，这篇文章也快写完了，为了便于理解，本文第一次搭建时，尽量简单，能运行即可，成功之后，再添加其它功能。前端编译工具使用基于 webpack 的 Laravel Mix，一般情况下，它可以满足大部分的需求，当然你也可以完全抛弃 Laravel Mix，配置自己的 webpack。

--------------------

下一篇是: vue利用`axios`异步请求后端数据

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70]: /images/20220310/c26e348114644bf7925d136b9dbc100a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70 1]: /images/20220310/a55a5012470644c39180bb665ff651df.png
[20190311001223255.png]: /images/20220310/906bc765cb6244bc98ac7174b632c71a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70 2]: /images/20220310/ea8a5bad1c224e279a73824a86c9e25e.png