Laravel5.5+vue+elementUI

时间 2019-12-01

标签 laravel5.5+vue+elementui laravel vue elementui 繁體版

原文原文链接

说明：php

网上存在不少关于项目搭建的教程，可是本人是初次搭建项目，因此想记录一下过程，避免之后再次踩坑css

注意：html

本教程项目的搭建是基于laravel5.5版本，如今最新的laravel版本是6.5，而6.5版本resource/asstes没有asstes目录前端

搭建laravel项目以及指定laravel的版本号,请参考教程：https://juejin.im/post/5dba81d0f265da4d525fd2ee#heading-12vue

若是你的larave项目搭建完成，而且执行 php artisan serve 可以正常运行项目，请开始下面的步骤：webpack

安装前端依赖库

进入laravel项目，执行ios

cnpm installlaravel

修改laravel路由

修改 routes/web.php 文件为web

Route::get('/', function () {
    return view('index');
});
复制代码

新建Hello.vue

在 resource/asstes/js/components/Hello.vuevue-router

<!--  -->
<template>
  <div class="">
      <h1>Hello,Laravel!</h1>
      <p class="hello">{{ msg }}</p>
  </div>
</template>

<script>
export default {
  //import引入的组件须要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
        msg: "Laravel+vue+elementUI",
    };
  }
};
</script>
<style lang="scss" scoped></style>
复制代码

修改app.js文件，渲染组件
```
require('./bootstrap');

window.Vue = require('vue');

// Vue.component('example-component', require('./components/ExampleComponent.vue'));

import Hello from './components/Hello.vue';

const app = new Vue({
    el: '#app',
    render: h => h(Hello)
});
复制代码
```
说明：app.js 是构建 Vue 项目的主文件，最后全部的组件都会被引入到这个文件，在引入全部组件以前，bootstrap.js 文件作了一些初始化的操做。同时，由于有了 window.Vue = require(‘vue’) 这句话，就再也不须要使用 import Vue from ‘vue’ 重复导入 Vue 了

新建laravel视图，和vue交互

resource/views/index.blade.vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
复制代码

说明：你可能在其余教程中看到有的在使用 assets 函数，这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的

编译前端组件
```
npm run watch 或者运行  npm run dev
复制代码
```
两者的区别：每次修改过vue文件以后，都须要先执行 npm run dev 编译项目，可是这样比较麻烦， npm run watch 可以监听改变的文件，从而作到自动编译

**注意：须要同时打开两个终端，一个终端运行 ** npm run watch 另一个终端运行: php artisan serve 启动项目 (固然也能够本身去配置，使用域名访问项目，而且不用一直开着终端运行 php artisan serve)

到这里 Laravel+vue的项目构建已经完成了，下面是讲解在项目中使用 element-ui和vue-router

引入elementUI
安装

cnpm i element-ui -S

在app.js中引入element

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
复制代码

在文件中使用

在Hello.vue中使用element的组件
在app.js中引入Hello.vue; // import Hello from './components/Hello.vue';
注入到页面中：
const app = new Vue({
    el: '#app',
    router,
    render: h => h(Hello)
});
复制代码

引入vue-router

安装

cpm install vue-router --save-dev

配置vue-router

// 在assets/js下新建：router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Hello from './../components/Hello.vue';

export default new VueRouter({
    saveScrollPosition:true, // 记住页面滚动的位置，H5适用
    routes:[{
        name:'hello',
        path:'/hello',
        component:Hello
        // component: resolve => void(require(['../components/Hello.vue'], resolve))
    }]
});
复制代码

建立项目的启动页面 App.vue

<template>
  <div>
        <h1>Hello, Vue!</h1>
       <router-view></router-view> <!-- 路由引入的组件将在这里被渲染 -->
  </div>
</template>
复制代码

注入到vue中

在app.js中引入vue-router

import App from './App.vue';
import router from './router/index.js';

const app = new Vue({
    el: '#app',
    router,
    render: h => h(App)
});
复制代码

代码拆分

代码拆分是将一些不常常变更的代码提取出来，以免每次都要从新编译，若是你频繁更新应用的 JavaScript，须要考虑对 vendor 库进行提取和拆分，这样的话，一次修改应用代码不会影响 vendor.js 文件的缓存。

Laravel Mix 的 extract 方法能够实现这样的功能：

修改项目根目录下的 webpack.mix.js 文件

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .extract(['vue','axios']);
复制代码

extract 方法接收包含全部库的数组或你想要提取到 vendor.js 文件的模块，使用上述代码做为示例，Mix 将会生成以下文件：

public/js/manifest.js  // Webpack manifest runtime
public/js/vendor.js  // vendor 库
public/js/app.js  // 应用代码
复制代码

同时修改 resources/views/index.blade.php 文件为

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Larvuent</title>
</head>
<body>
    <div id="app"></div>
      
    <script src="{{ mix('js/manifest.js') }}"></script>
    <script src="{{ mix('js/vendor.js') }}"></script>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
复制代码

全局的 mix 函数会根据 public/mix-manifest.json 中的路径去加载对应的文件，同时也要注意引入三个 js 文件的顺序，以免出错。

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Laravel5.5+vue+elementUI

安装前端依赖库

修改laravel路由

新建Hello.vue

修改app.js文件，渲染组件

新建laravel视图，和vue交互

编译前端组件

代码拆分