目前项目是使用的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)
-
});
重新编译。
原文地址：https://www.cnblogs.com/guiyishanren/p/10651596.html