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

搭建过程

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值