首页-教程-开发语言

Laravel8中使用vue

 3227

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

安装Laravel8

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

引入laravel/ui

  1. cd la8vue
  2. composer require laravel/ui

初始化Bootstarp与Vue

  1. php artisan ui bootstrap
  2. php artisan ui vue

安装Vue前后对比

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

安装前

  1. "devDependencies": {
  2.    "axios": "^0.19",
  3.    "cross-env": "^7.0",
  4.    "laravel-mix": "^5.0.1",
  5.    "lodash": "^4.17.19",
  6.    "resolve-url-loader": "^3.1.0"
  7. }

安装后

  1. "devDependencies": {
  2.    "axios": "^0.19",
  3.    "bootstrap": "^4.0.0",
  4.    "cross-env": "^7.0",
  5.    "jquery": "^3.2",
  6.    "laravel-mix": "^5.0.1",
  7.    "lodash": "^4.17.19",
  8.    "popper.js": "^1.12",
  9.    "resolve-url-loader": "^2.3.1",
  10.    "sass": "^1.20.1",
  11.    "sass-loader": "^8.0.0",
  12.    "vue": "^2.5.17",
  13.    "vue-template-compiler": "^2.6.10"
  14. }

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

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

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

安装依赖

  1. npm install

代码测试

编写一个Vue组件

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

  1. <template>
  2. <div class="container">
  3.    <div class="jumbotron">
  4.         这里是自如初博客
  5.    </div>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10.  // 导出组件
  11.  name:'DemoComponent'
  12. }
  13. </script>
  14. <style scoped>
  15. </style>

app.js中注册组件

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

改造laravel欢迎界面视图

resources/views/welcome.blade.php

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

运行

窗口中运行vue

  1. npm run dev

实时编译

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

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


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

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐