laravel 使用 vue 和 element

前提：确保你的电脑安装了 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-optionv-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

———— 占位符

转载于:https://www.cnblogs.com/windyet/articles/10160355.html

laravel 使用 vue 和 element相关推荐

基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+
2019独角兽企业重金招聘Python工程师标准>>> ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方 ...
Vue之element table 后端排序实现
Vue之element table 后端排序实现 1.如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
用Docker搭建Laravel和Vue项目的开发环境
在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速.轻量级.不依赖本地电脑所安装的任何开发套件的可复制的Laravel和Vue项目的开发环境(开发环境的所有依赖都安装在Docker构建容器 ...
element筛选 ajax,vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
##vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询基于element Transfer 直接上代码 XXXXX 编辑XXX 编辑XXXX style=" ...
vue使用element 上传图片，修改图片
vue使用element 上传图片,修改图片文章目录 vue使用element 上传图片,修改图片前言一.应用场景 1.上传图片并进行放大预览 2.图片上传代码二.修改已经上传的图片,并展示到 ...
Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
vue php聊天室,实时聊天室：基于Laravel+Pusher+Vue通过事件广播实现
之前有说过要整理出一篇事件广播的教程,今天终于有时间把这篇文章给写了出来,本次的教程是基于Laravel+Pusher+Vue,以事件广播作为核心技术,让你可以快速搭建起一个实时聊天室应用,话不多说, ...

laravel 使用 vue 和 element

laravel 使用 vue 和 element相关推荐

最新文章

热门文章