目前项目是使用的vue+laravel来写的，其中laravel和vue分别放了一个目录，但是这样有个问题，那就是vue需要经常更新，不然运行项目会经常出现各种问题，这里就看了看laravel的文档，才知道还有Mix这个组件，进行编译前后端资源。下载完成后的目录和laravel是一样的，只是在根目录下面有一个node_models目录。

安装：

安装Node，首先要确保自己的电脑上面有安装Node。

使用：node -v 和 npm -v查看是否有版本号，有即表示有安装Node，否则需要安装Node。

cdn.jsdelivr.net/npm/vue,下载最新的Node。

接下来就需要安装Laravel Mix，首先安装Laravel项目：composer create-project --prefer-dist laravel/laravel blog 这里项目的名字叫blog 。

安装成功后，进入安装目录。

安装前端依赖：npm install（这里可以选择淘宝镜像）

使用例子：

修改 routes/web.php 文件为：

Route::get('/',function(){

return view('index');

});

新建一个Hello.vue文件

在 resources/assets/js/components 目录下新建 Hello.vue 文件

<template>
<div>
<h1>Hello, Larvuent!</h1>
<p class="hello">{{ msg }}</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'This is a Laravel with Vue and Element Demo.'
}
}
}
</script>
<style>
.hello {
font-size: 2em;
color: green;
}
</style>

修改 app.js 文件

修改 resources/assets/js/app.js 文件

require('./bootstrap');
window.Vue = require('vue');
// Vue.component('example', require('./components/Example.vue')); // 注释掉
import Hello from './components/Hello.vue'; // 引入Hello 组件
const app = new Vue({
el: '#app',
render: h => h(Hello)
});

新建 Laravel 视图文件，和 Vue 交互

在 resources/views 目录下新建 index.blade.php 文件

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Larvuent</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

编译：运行 npm run dev

提示编译成功，并访问页面：输入http://192.168.1.112

显示如下表示成功：

现在已经完成vue+laravel了，还需要引入element.

npm i element-ui -S 即可引入element

修改 resources/assets/js/app.js 文件

import Hello from './components/Hello.vue'; // 引入Hello 组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
Vue.use(ElementUI);

修改Hello.vue，使用element组件。

<template>
<div>
<h1>Hello, Larvuent!</h1>
<el-button @click="visible = true">按钮</el-button>
<el-dialog v-model="visible">
<p>欢迎使用 Element</p>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
visible: false
}
}
}
</script>
<style>
.hello {
font-size: 2em;
color: green;
}
</style>

再次运行npm run dev 进行编译前端资源。然后访问页面如下：

这里修改了一个vue文件就要重新编译一次，很麻烦，所有可以运行 npm run watch 就可以不需要再次编译了，每次修改过后的代码自动就会编译。

这里还有一个很重要的问题，那就是很多人参照以上的步骤会报错，并不会出现正常的页面。

很多人都会出现这样的问题。

所有需要在index页面加一个header头，就可以了。

修改 resources/views/index.blade.php 文件为

目前都只是最基本的使用，大型项目是需要使用vue路由的。所有这里需要安装路由。

运行 npm install vue-router --save-dev 安装路由。

配置：

在 resources/assets/js 目录下新建目录 router ，同时在 router 目录下新建 index.js 文件

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
export default new VueRouter({
saveScrollPosition: true,
routes: [
{
name: 'hello',
path: '/hello',
component: resolve => void(require(['../components/Hello.vue'], resolve))
}
]
});

在 resources/assets/js 目录下新建 App.vue 文件

<template>
<div>
<h1>Hello, {{ msg }}!</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Vue'
}
}
}
</script>
<style>
</style>

修改 resources/assets/js/app.js 文件为

// import Hello from './components/Hello.vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
Vue.use(ElementUI);
import router from './router/index.js';
const app = new Vue({
el: '#app',
router,
render: h => h(App)
});

重新编译。

Laravel Mix编译前端资源的更多相关文章

基于Laravel开发博客应用系列 —— 使用Bower+Gulp集成前端资源
本节我们将讨论如何将前端资源集成到项目中,包括前端资源的发布和引入.本项目将使用 Bower 和 Gulp 下载和集成jQuery.Bootstrap.Font Awesome 以及 DataTabl ...
laravel 中与前端的一些事2 之使用Gulp编译sass
下载所有依赖npm的packagist: 下载了前端laravel elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...
Bower和Gulp集成前端资源
在我们开始前先介绍下流程: 安装node.js. 安装npm. 全局安装bower. 根目录创建 .bowerrc (可选) 在项目中安装bower 并创建 bower.json 文件,运行 bowe ...
版本号/缓存刷新 laravel mix函数
很多开发者会给编译的前端资源添加时间戳或者唯一令牌后缀以强制浏览器加载最新版本而不是代码的缓存副本.Mix 可以使用 version 方法为你处理这种场景. version 方法会自动附加唯一哈希到已 ...
Laravel5.1 搭建博客 --编译前端文件
上篇文章写了Gulp编译前端文件,这篇记录下在搭建博客中使用Gulp 1 引入bootstrap和js 1.1 首先先在项目本地安装Bower sudo npm install bower 1.2 创 ...
Webpack:前端资源模块化管理和打包工具
一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...
前端资源构建-Grunt环境搭建
前端资源构建-Grunt 随着前端开发的复杂度越来越高,前端页面动辄上几十个js,十几个html页面.用户打开一个页面需要加载一堆的css,js,html文件,对于有大量用户的web应用来说,既消耗服 ...
Android反编译(二)之反编译XML资源文件
Android反编译(二) 之反编译XML资源文件 [目录] 1.工具 2.反编译步骤 3.重新编译APK 4.实例 5.装X技巧 6.学习总结 1.工具 1).反编译工具 apktool http ...
前端比较好的学习资料（包括js和css）以及最全前端资源汇集
js详细资料: http://javascript.ruanyifeng.com/ 『引』最全前端资源汇集: 来源:http://www.jeffjade.com/2016/03/30/104-fro ...

随机推荐

YTU 2436: C++ 习题输出日期时间--友元类
2436: C++ 习题输出日期时间--友元类时间限制: 1 Sec 内存限制: 128 MB 提交: 1243 解决: 690 题目描述设计一个日期类和时间类,编写display函数用于显 ...
第十六周 Leetcode 600. Non-negative Integers without Consecutive Ones(HARD) 计数dp
Leetcode600 很简单的一道计数题给定整数n 求不大于n的正整数中二进制表示没有连续的1的数字个数在dp过程中只要保证不出现连续1以及大于n的情况即可. 所以设计按位dp[i][j]表示 ...
ASP.NET项目开发实战<<一键创建解决方案>>
视频演示地址:http://www.youku.com/playlist_show/id_23192838.html 第一步:创建项目需要的数据库打开辅助开发工具,如下图从左侧菜单找到项目数据库 ...
Marching squares 算法获取轮廓(contour tracing)
https://en.wikipedia.org/wiki/Marching_squares http://blog.csdn.net/coolingcoding/article/details/1 ...
bzoj 1025: [SCOI2009]游戏【数学+dp】
很容易发现行数就是lcm环长,也就是要求和为n的若干数lcm的个数有结论若p1^a1+p2^a2+...+pm^am<=n,则ans=p1^a1p2^a2..*pm^am是n的一个可行答案.( ...
ES6 我的总结学习
1 let 和 const let 的作用域与 const 命令相同:只在声明所在的块级作用域内有效.且不存在变量提升 . 1.1 let let 所声明的变量,可以改变. let a = 123 a ...
【爬坑系列】之docker的overlay网络配置(未完，待续)
理论知识储备: 想了解vxlan网络的知识:https://www.cnblogs.com/shuiguizi/p/10923841.html 想了解docker网络的原理知识:https://www ...
PostgreSQL 9.6.2版本在centOS下的安装和配置
1.如果有用yum安装过旧版,卸载掉: yum remove postgresql* 2.更新一下yum: sudo yum update 3.去官网找到适合你系统的资源的下载地址,然后使用w ...
Neighbor House LightOJ - 1047
Neighbor House LightOJ - 1047 #include<cstdio> #include<cstring> #include<algorithm&g ...
ACM_回文素数
回文素数 Time Limit: 2000/1000ms (Java/Others) Problem Description: 131号是一个主回文,因为它是一个素数和一个回文(当向后读时,它是相同的 ...

Laravel Mix编译前端资源