Laravel Version: 5.7
Vue Version: 2.5
Prerequisite: Prior to this we have built a good framework to support Laravel 5.7, if there do not understand can refer to the article on
Installation depends
laravel is dependent vue of carrying is performed
cnpm install //cnpm淘宝镜像，npm的速度比较慢，速度慢的请换源After the installation is complete, the project will be a little more files
ExampleComponent.vue vue example is a system created
View app.js, found instances in which the introduction of components
view files in the resources folder in the folder created index.blade.php
In which you enter
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<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>
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
<script src="{{ mix('js/app.js') }}"></script>
</html>Note:
<meta name="csrf-token" content="{{ csrf_token() }}">to prevent CSRF attacks
web.php modify the route of the router is
Route::get('/', function () {
return view('index');
});Excuting an order
npm run devThe following error may occur
This is because there is no installation Laravel Mix, execute the following command to install
npm install --no-bin-linksThen run
// 运行所有 Mix 任务...
npm run dev
// 运行所有 Mix 任务并缩小输出..
npm run productionSee the following interface proved vue already installed
Installation Element-UI
cnpm i element-ui -sSee the following results of the installation is successful
Introducing element assembly, modify resources / js / app.js file added
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Modify the ExampleComponent.vue file to add an element to any component in a file
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
请选择您需要的水果：
</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 {
mounted() {
console.log('Component mounted.')
},
data() {
return {
options: [{
value: '选项1',
label: '香蕉'
}, {
value: '选项2',
label: '橘子'
}, {
value: '选项3',
label: '苹果'
}, {
value: '选项4',
label: '哈密瓜'
}, {
value: '选项5',
label: '葡萄'
}],
value: ''
}
}
}
</script>
Excuting an order
npm run devResults are as follows, indicating Element components have been successfully added to the project
Vue-router configuration
Installation vue-router
npm install vue-router –save-devThen resources / js file create router.js and App.vue
And then add the following content App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script scoped>
export default {
data(){
return {}
},
components: {
},
computed: {},
methods: {
},
mounted() {
},
}
</script>Add the following in the router.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))
},
]
})Modify app.js file
Add the following
import App from './App.vue'; //添加的内容
import router from './router';//添加的内容
router, //添加的内容
render:h => (App)//添加的内容Modify a result, the red line is the added content
See the results for the localhost / # / Description vue-router installation is successful
So far the installation has been all over, and if there is a problem encountered in the installation, please leave a message to tell me, I will give you the first time to help
