Laravel5.8 安装使用 vue
2 / 0 / 创建于 5年前 /
阿周日记 的个人博客
网上的一些教程让我流泪。。。真的，我就是想安个 vue，能跑个实例，然后开开心心给到前端就完事了，都会夹杂一些 vue 的多余知识，这些可以后续看 vue 文档啊。
1. 看文档，你看 laravel 文档前端指南 vue 那块虽然短小无力，但是完全满足我上边说出的需求。
#项目根目录
npm install2. 成功后目录多了一个 node_modules, 多余的一些文件可以不用管。
3. 执行多余文件 webpack.mix.js 中声明
npm run dev
4.laravel 给你自动生成的 vue 实例已经成功了。传不了图片，看代码吧 “项目目录 \resources\js\app.js”
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// 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);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});5. 编辑前端界面，根据你控制器来，你要是默认的 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>首页</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- app.css -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Styles -->
<style>
</style>
</head>
<body>
<!-- app.js编译的Vue.component调用 -->
<div id="app">
<example-component></example-component>
</div>
<!-- app.js -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>6. 在命令行内执行一遍npm run dev
7. 浏览器访问，看到如两段文字就成功了
Example Component
I'm an example component.
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：