laravel 使用 vue 和 element

最新推荐文章于 2023-10-26 09:32:11 发布

aogouqian7476

最新推荐文章于 2023-10-26 09:32:11 发布

阅读量818

点赞数

文章标签： javascript php json ViewUI

原文链接：http://www.cnblogs.com/windyet/articles/10160355.html

版权

前提：确保你的电脑安装了 node 和 npm

1、安装 laravel5.7：

composer create-project laravel/laravel --prefer-dist laravel "5.7.*"

2、laravel 自带 vue，所以只要在根目录下执行：

npm install

—— 执行该命令会自动安装 package.json 里面指定的文件。

3、修改 route/web.php：（这步其实是把默认的 welcome 改成了 index）

// 把根目录指向 index.blade.php
Route::get('/', function () {
    return view('index');
});

并且将 resources/views/index.blade.php 内容设置为：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel</title>
    <link href="/css/app.css" rel="stylesheet">

</head>
<body>
<div id="app">
    <example></example>
</div>
</body>
<script src="{{ mix('js/app.js') }}"></script>
</html>

—— 其实这里的 index.blade.php，就是使用 cli 构建出来的 index.html 一样的。域名指向了这个 html，然后这个 html 挂载了 app.js，就可以跟 vue 交互了。剩下的事情就是单页面的 vue 怎么用 api 和后端交互的问题了。没有任何的区别。

4、修改 app.js 的模板设置：

// 将
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// 修改为：
Vue.component('example', require('./components/ExampleComponent.vue').default);

5、执行run，看下laravel 的画面是否出现：

npm run dev  // 或者 npm run watch

6、引入 elementUI：

// 安装，完成后会在 node_modules 下多出 element-ui的文件夹
npm i element-ui -S
// 引入，在 resources/assets/js/app.js 文件中加入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

7、测试elementUI 的效果：

修改ExampleComponent.vue文件在文件中随便加入element组件：

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        I'm an example component!
                    </div>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        }
    }
</script>

—— 执行 npm run dev 或者 npm run watch 即可查看效果

8、安装 vue-rouute：

npm install vue-router --save-dev

9、在 resource/js 下创建 route.js 和 App.vue

route.js 添加内容：

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

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

App.vue添加内容：

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script scoped>

    export default {
        data(){
            return {}
        },
        components: {

        },
        computed: {},
        methods: {

        },
        mounted() {
        },
    }
</script>

10、app.js 里面引入 route.js 和 App.vue

/**
 * xxxxxxxx
 */

require('./bootstrap');

window.Vue = require('vue');

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';          //添加的内容
import router from './router.js';     //添加的内容

Vue.use(ElementUI);

/**
 * xxxxxxxx
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('example', require('./components/ExampleComponent.vue').default);

/**
 * xxxxxxxx
 */

const app = new Vue({
    el: '#app',
    router,               //添加的内容
    render:h => h(App)    //添加的内容
});

11、测试路由：

添加一个path 为 /test 的路由，并且在 component 里面创建 TestComponent.vue 组件并加入以下内容：

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

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

—— npm run dev ，然后访问 http://laravel.com/#/test进行访问，可得到最新数据。

———— 自此，laravel 下安装 vue ，并安装路由和

//关于 npm install 的说明：

--save 表示开发和线上环境都得有这个库。-- save-dev是只有开发环境才需要，比如 webpack 这个包，就只有开发环境才需要。

对应 package.json 就是 devDependencies 和 dependencies 的配置差别。dependencies里面的开发和线上都会有。

=> 但是：因为 vue 最后并不需要 build 上线，而是通过 laravel-mix 自动同步到了public 下，所有我觉得与 laravel 的混合使用，是没有开发环境和上线的区别的。

———— 文件介绍 ————

// routes\web.php

这个文件是Laravel的路由文件，Vue开发中用一句指向入口文件

// resources\views

laravel的视图目录，Vue开发中这里只有一个文件，作为入口文件。

// webpack.mix.js

这个文件是laravel-mix的配置文件，其中配置了 vue 编写和 css 的位置：

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

// resources/js/app.js

这个文件是Vue的入口文件，所有的组件都会在这里注册。

// resources/js/components

这个目录下存放的是Vue单文件组件。

// resources/sass

存放 vue 的css 文件

—————— 常用命令 ——————

// 安装 package.json 指定的文件
npm install
// 编译前端文件，会执行 webpack.mix.js 文件配置，将编译好的资源放到 public 下。
npm run dev
// 自动检测前端文件变化并实时编译。
npm run watch

———— 占位符

转载于:https://www.cnblogs.com/windyet/articles/10160355.html

aogouqian7476

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
laravel 使用 vue 和 element

前提：确保你的电脑安装了 node 和 npm1、安装 laravel5.7：composer create-project laravel/laravel --prefer-dist laravel "5.7.*"2、laravel 自带 vue，所以只要在根目录下执行：npm install—— 执行该命令会自动安装 package.j...
复制链接

扫一扫