Laravel8中使用vue

 2674

本篇文章给大家带来了Laravel8中使用vue的相关知识,感兴趣的朋友,下面一起来看一下,希望对大家有帮助。

安装Laravel8

composer create-project --prefer-dist laravel/laravel la8vue

引入laravel/ui

cd la8vue
composer require laravel/ui

初始化Bootstarp与Vue

php artisan ui bootstrap
php artisan ui vue

安装Vue前后对比

路径为 根目录下的package.json文件

安装前

"devDependencies": {
   "axios": "^0.19",
   "cross-env": "^7.0",
   "laravel-mix": "^5.0.1",
   "lodash": "^4.17.19",
   "resolve-url-loader": "^3.1.0"
}

安装后

"devDependencies": {
   "axios": "^0.19",
   "bootstrap": "^4.0.0",
   "cross-env": "^7.0",
   "jquery": "^3.2",
   "laravel-mix": "^5.0.1",
   "lodash": "^4.17.19",
   "popper.js": "^1.12",
   "resolve-url-loader": "^2.3.1",
   "sass": "^1.20.1",
   "sass-loader": "^8.0.0",
   "vue": "^2.5.17",
   "vue-template-compiler": "^2.6.10"
}

安装完成后,Vue组件和JS文件在resources/js目录下;

入口文件resources/js/app.js文件

require('./bootstrap');
window.Vue = require('vue');
// 注册组件
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// 挂载实例
const app = new Vue({
   el: '#app',
});

安装依赖

npm install

代码测试

编写一个Vue组件

resources/js/components目录下创建DemoComponent.vue组件

<template>
<div class="container">
   <div class="jumbotron">
        这里是自如初博客
   </div>
</div>
</template>
<script>
export default {
 // 导出组件
 name:'DemoComponent'
}
</script>
<style scoped>
</style>

app.js中注册组件

Vue.component('example-component', require('./components/DemoComponent.vue').default);

改造laravel欢迎界面视图

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!--1、 引入支持 Bootstrap 的 CSS 样式文件 -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet"> 
    </head>
    <body>
        <div id="app">
            <div>
                <!-- 3、使用组件 -->
                <demo-component></demo-component>
            </div>
        </div>  
        <!-- 2、引入支持Vue框架和Vue组件的app.js文件 -->
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

运行

窗口中运行vue

npm run dev

实时编译

现在的情况是,每改动一次Vue组件就要重新执行npm run dev,这样非常麻烦;

可以使用npm run watch命令编译前端资源,每改动一次就会自动进行重新编译


TAG标签:
本文网址:https://www.zztuku.com/detail-13791.html
站长图库 - Laravel8中使用vue
申明:本文转载于《自如初博客》,如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐