您现在的位置是:自如初>LaravelLaravel
Laravel8中使用vue
温新
2020-12-06 15:50:57
【Laravel】
7793人已围观
简介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
命令编译前端资源,每改动一次就会自动进行重新编译
我是小白,期待和优秀的你一起同行!
小白
2020年12月06日
很赞哦!(54)
相关文章
- GitHub Copilot CURD 提高了效率但也存在问题
- GitHub Copilot 体验
- Laravel 10.x 使用 Tailwind CSS
- Laravel 10.x - Inertiajs 使用 composer require tightenco/ziggy 组件
- Laravel 10.x 安装 Inertiajs & Vue3
- Laravel 10 CURD 演示
- Laravel 使用 Server 层
- Linux 系统安装 Laravel 安装器 无效的解决方法
- Vue3 & Vite 中如何使用 Tailwind CSS 之 Laravel9后台实现-前后端分离演示案例(三)
- Laravel9 使用 barryvdh/laravel-dompdf 创建 PDF 文件
文章评论
-
RDFYjolf 2023年05月22日
-
RDFYjolf 2023年08月31日