Laravel Mix编译前端资源
原文地址
目前项目是使用的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)
-
});
重新编译。
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
