前提：确保你的电脑安装了 node 和 npm
1、安装 laravel5.7：
composer create-project laravel/laravel --prefer-dist laravel "5.7.*"
2、laravel 自带 vue，所以只要在根目录下执行：
npm install
—— 执行该命令会自动安装 package.json 里面指定的文件。
3、修改 route/web.php：（这步其实是把默认的 welcome 改成了 index）
// 把根目录指向 index.blade.php Route::get('/', function () { return view('index'); });
并且将 resources/views/index.blade.php 内容设置为：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<link href="/css/app.css" rel="stylesheet">
</head>
<body>
<div id="app">
<example></example>
</div>
</body>
<script src="{{ mix('js/app.js') }}"></script>
</html>
—— 其实这里的 index.blade.php，就是使用 cli 构建出来的 index.html 一样的。域名指向了这个 html，然后这个 html 挂载了 app.js，就可以跟 vue 交互了。剩下的事情就是单页面的 vue 怎么用 api 和 后端交互的问题了。没有任何的区别。
4、修改 app.js 的模板设置：
// 将 Vue.component('example-component', require('./components/ExampleComponent.vue').default); // 修改为： Vue.component('example', require('./components/ExampleComponent.vue').default);
5、执行run，看下laravel 的画面是否出现：
npm run dev // 或者 npm run watch
6、引入 elementUI：
// 安装，完成后会在 node_modules 下多出 element-ui的文件夹 npm i element-ui -S
// 引入，在 resources/assets/js/app.js 文件中加入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
7、测试elementUI 的效果：
修改ExampleComponent.vue文件 在文件中随便加入element组件：
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component!
</div>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
—— 执行 npm run dev 或者 npm run watch 即可查看效果
8、安装 vue-rouute：
npm install vue-router --save-dev
9、在 resource/js 下创建 route.js 和 App.vue
route.js 添加内容：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter); export default new VueRouter({ saveScrollPosition: true, routes: [ { name: "index", path: '/', component: resolve => void(require(['./components/ExampleComponent.vue'], resolve)) }, ] });
App.vue添加内容：
<template>
<div>
<router-view></router-view>
</div>
</template>
<script scoped>
export default {
data(){
return {}
},
components: {
},
computed: {},
methods: {
},
mounted() {
},
}
</script>
10、app.js 里面引入 route.js 和 App.vue
/** * xxxxxxxx */ require('./bootstrap'); window.Vue = require('vue'); import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; //添加的内容 import router from './router.js'; //添加的内容 Vue.use(ElementUI); /** * xxxxxxxx */ // 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); Vue.component('example', require('./components/ExampleComponent.vue').default); /** * xxxxxxxx */ const app = new Vue({ el: '#app', router, //添加的内容 render:h => h(App) //添加的内容 });
11、测试路由：
添加一个path 为 /test 的路由，并且在 component 里面创建 TestComponent.vue 组件并加入以下内容：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter); export default new VueRouter({ saveScrollPosition: true, routes: [ { name: "index", path: '/', component: resolve => void(require(['./components/ExampleComponent.vue'], resolve)) }, { name: "test", path: '/test', component: resolve => void(require(['./components/TestComponent.vue'], resolve)) }, ] });
—— npm run dev ，然后访问 http://laravel.com/#/test进行访问，可得到最新数据。
———— 自此，laravel 下安装 vue ，并安装路由和
//关于 npm install 的说明：
--save 表示开发和线上环境都得有这个库。-- save-dev是只有开发环境才需要，比如 webpack 这个包，就只有开发环境才需要。
对应 package.json 就是 devDependencies 和 dependencies 的配置差别。dependencies里面的开发和线上都会有。
=> 但是： 因为 vue 最后并不需要 build 上线，而是通过 laravel-mix 自动同步到了public 下，所有我觉得与 laravel 的混合使用，是没有开发环境和上线的区别的。
———— 文件介绍 ————
// routes\web.php
这个文件是Laravel的路由文件，Vue开发中用一句指向入口文件
// resources\views
laravel的视图目录，Vue开发中这里只有一个文件，作为入口文件。
// webpack.mix.js
这个文件是laravel-mix的配置文件，其中配置了 vue 编写和 css 的位置：
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
// resources/js/app.js
这个文件是Vue的入口文件，所有的组件都会在这里注册。
// resources/js/components
这个目录下存放的是Vue单文件组件。
// resources/sass
存放 vue 的css 文件
—————— 常用命令 ——————
// 安装 package.json 指定的文件
npm install
// 编译前端文件，会执行 webpack.mix.js 文件配置，将编译好的资源放到 public 下。 npm run dev // 自动检测前端文件变化并实时编译。 npm run watch
———— 占位符
