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

最新推荐文章于 2024-10-11 17:22:17 发布

即墨丹青

最新推荐文章于 2024-10-11 17:22:17 发布

阅读量4.9k

点赞数 1

分类专栏： laravel 文章标签： vue 开始到结束 laravel 后台搭建

本文链接：https://blog.csdn.net/qq_26282869/article/details/88386836

版权

搭建过程

注意:这里要去报你本地已经安装好了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 交互
在 re