laravel5.5+vue2.5+element+vux

最新推荐文章于 2024-06-27 19:54:40 发布

Eizeson

最新推荐文章于 2024-06-27 19:54:40 发布

阅读量5.3k

点赞数 5

分类专栏：学习笔记文章标签： laravel5-5 vue2-5 elementUI vux vue-router

本文链接：https://blog.csdn.net/Laoynice/article/details/79221200

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

之前弄过几次 laravel+vue2.0+element+vux的搭建，现在搭建起来会遇见一些问题，写这篇博客记录一下.

搭建环境

在web目录下，使用composer创建项目

    composer create-project --prefer-dist laravel/laravel laravel_test//laravle_test为项目名称

这里写图片描述
稍等片刻，laravel安装完成后进入laravel_test项目目录

安装依赖

laravel中是自带vue的依赖的，执行

    cnpm install //cnpm淘宝镜像，npm的速度比较慢，速度慢的请换源

我们可以测试一下，我们进入resources/assets/js/components下可以看到有一个 .vue文件这是laravel默认带的一个例子。

这里写图片描述

我们可以在app.js中看到引入了vue，注册这个组件就是ExampleComponent

这里写图片描述

我们在resources/views下新建一个模板 index.blade.php内容为

<!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>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
    </body>

    <script src="{{ mix('js/app.js') }}"></script>
</html>

注意 <meta name="csrf-token" content="{{ csrf_token() }}">是防止CSRF攻击

我们在routes/web.php修改laravel的路由

    Route::get('/', function () {
        return view('index');
    });

然后我们编译运行。执行：

npm run dev

如果在编译的过程中出现这种

cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js

系统找不到指定的路径。
events.js:182
throw er; // Unhandled ‘error’ event
^

Error: spawn node_modules\webpack\bin\webpack.js ENOENT
at notFoundError (D:\wamp64\www\laravel_test\node_modules_cross-spawn@6.0.4@cross-spawn\lib\enoent.js:6:26)
at verifyENOENT (D:\wamp64\www\laravel_test\node_modules_cross-spawn@6.0.4@cross-spawn\lib\enoent.js:40:16)
at ChildProcess.cp.emit (D:\wamp64\www\laravel_test\node_modules_cross-spawn@6.0.4@cross-spawn\lib\enoent.js:27:25)

可能是在安装包的时候出现了异常，我们需要完全重置，执行下边命令:

rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear –force
npm install

编译完成之后我们在浏览器中浏览一下，我们可以通过配虚拟主机来访问：
这里写图片描述
至此Vue已经安装好了

引入element

安装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);

这里写图片描述

修改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等编译完成，刷新浏览器。

这里写图片描述

注意：以上引入element的时候会有变动，根据官方文档为准。

Vux的安装

我们先安装Vux的必要组件

npm install vux –save
npm install –save-dev vux-loader
npm install –save-dev less-loader

然后我们将webpack.config.js文件提出来

cp node_modules/laravel-mix/setup/webpack.config.js ./

修改webpack.config.js文件

/**
 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
 */

require('./node_modules/laravel-mix/src/index');//修改
require(Mix.paths.mix());

/**
 * Just in case the user needs to hook into this point
 * in the build process, we'll make an announcement.
 */

Mix.dispatch('init', Mix);

/**
 * Now that we know which build tasks are required by the
 * user, we can dynamically create a configuration object
 * for Webpack. And that's all there is to it. Simple!
 */

let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');//修改

module.exports = new WebpackConfig().build();
//添加内容
const vuxLoader = require('vux-loader')
const webpackConfig = module.exports // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui'] 
})

然后修改package.json把webpack.config.js的文件指向为根目录的

这里写图片描述
修改为

"dev": "npm run development",
"development": "cross-env NODE_ENV=development webpack --progress --hide-modules ",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules"

缺省 - -config参数默认指向根目录webpack.config.js

然后去Vux官网找一个例子修改ExampleComponent.vue文件

<template>
  <div>
    <group >
      <radio title="type" v-model="type" :options="['1', '2', '3', '4', '5']"></radio>
    </group>
    <panel  :footer="footer" :list="list" :type="type" @on-img-error="onImgError"></panel>
  </div>
</template>



<script>
import { Panel, Group, Radio } from 'vux'

export default {
  components: {
    Panel,
    Group,
    Radio
  },
  methods: {
    onImgError (item, $event) {
      console.log(item, $event)
    }
  },
  data () {
    return {
      type: '1',
      list: [{
        src: 'http://somedomain.somdomain/x.jpg',
        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题二',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: {
          path: '/component/radio',
          replace: false
        },
        meta: {
          source: '来源信息',
          date: '时间',
          other: '其他信息'
        }
      }],
      footer: {
        title: 'footer',
        url: 'http://vux.li'
      }
    }
  }
}
</script>

执行npm run dev 进行编译：刷新页面

这里写图片描述

扩展 Vue-router 使用

首先，我们要安装vue-router组件

npm install vue-router –save-dev

然后我们创建router.js 和 App.vue 在 resources\assets\js目录下

在App.vue中添加

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script scoped>

    export default {
        data(){
            return {}
        },
        components: {

        },
        computed: {},
        methods: {

        },
        mounted() {
        },
    }
</script>

在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))
        },
    ]
})

然后我们需要修改app.js中的内容


/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

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';//添加的内容

Vue.use(ElementUI);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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



const app = new Vue({
    el: '#app',
    router,//添加的内容
    render:h => h(App)//添加的内容
});

npm run dev编译一下，然后我们刷新一下页面

这里写图片描述

OK，我们Vue的路由就配置好了，我们可以在router.js中写多条路由。

这里写图片描述

我们输入我们的路由

这里写图片描述

至此我们就结束了！

Eizeson

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
laravel5.5+vue2.5+element+vux

之前弄过几次 laravel+vue2.0+element+vux的搭建，现在搭建起来会遇见一些问题，写这篇博客记录一下.搭建环境在web目录下，使用composer创建项目 composer create-project --prefer-dist laravel/laravel laravel_test//laravle_test为项目名称稍等片刻，laravel安装完成后进入lara
复制链接

扫一扫

专栏目录