Laravel5.5+Vue+Element-ui 环境搭建

9 篇文章 0 订阅

1. compose和node的安装

这两个的安装网上教程多的是,大家可自行下载安装。

2. Laravel5.5 安装

3. Vue的安装

Laravel 默认是带vue环境的,所以我们可以非常方便的搭建使用

这里写图片描述

安装的话我们直接进入项目的根目录执行 npm install ,等待一段时间就OK了

这里写图片描述

然后,我们来写一些代码来测试下,我们进入 resources\assets 目录后会发现,laravel默认带了一个vue的例子,

这里写图片描述

我们可以看一下app.js的代码,发现他是引入了vue,然后注册了一个组件,也就时Example.vue , Example.vue 中输出两句话,这是一个完整的组件,我们可以直接使用。

这里写图片描述

我们找到resources\views\welcome.blade.php 文件,将其修改为下面的代码,也就是吧原来的HTML删了,添加一个id为app的div,在其中使用app.js 中注册的组件,需要注意的就是要添加crsf-Token的验证meta标签,和引入 app.js 文件,这个js文件也可以去根目录中的 webpack.mix.js 文集中修改。

<!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></example>
        </div>
    </body>
    <script src="/js/app.js"></script>
</html>

然后,我们npm run dev 一下然后到浏览器中看一下,我配置的虚拟主机访问地址是 vuxtest.cn npm编译好之后我们在浏览器查看发现已经安装好了。

这里写图片描述

4. Element-ui 安装

我们可以去 Element-ui 官方文档 查看安装教程,也就是简单的npm 安装一下

npm i element-ui -S   //安装Element-ui

然后在 resources\assets\js\app.js 中引入Element-ui组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
  •  

这里写图片描述

修改Example.vue 文件,使用Element-ui的组件,修改为

<template>
    <div>
        <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
        <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

最后 npm run dev 编译一下,到浏览器查看效果

这里写图片描述

5. Vux的安装

我们首先安装Vux必要的组件

npm install vux --save   //安装vux
npm install vux-loader --save  
npm install less-loader --save 

这里写图片描述

安装完成后我们还需要将 webpack.config.js 文件提出来

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

这里写图片描述

然后打开webpack.config.js 文件,向其中添加一些代码,然后将第8行和第24行的路径修改为 ./node_modules/laravel-mix/src/index./node_modules/laravel-mix/src/builder/WebpackConfig

这里写图片描述

附加代码:

/**
 * 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文件的config文件路径 为根目录的webpack.config.js文件

这里写图片描述

修改为
这里写图片描述

然后我们去Vux中找一个demo 然后修改 Example.vue文件为

<template>
    <div>
        <group>
            <cell title="Total" value="¥1024"></cell>
            <cell-form-preview :list="list"></cell-form-preview>
        </group>
    </div>
</template>



<script>
    import { CellFormPreview, Group, Cell } from 'vux'

    export default {
        components: {
            CellFormPreview,
            Group,
            Cell
        },
        data () {
            return {
                list: [{
                    label: 'Apple',
                    value: '3.29'
                }, {
                    label: 'Banana',
                    value: '1.04'
                }, {
                    label: 'Fish',
                    value: '8.00'
                }]
            }
        }
    }
</script>

然后 npm run dev 编译后刷新浏览器即可看到
这里写图片描述

如果有什么不懂得,欢迎留言提问

6. Vue-router 的使用

这里扩展Vue-router的使用,首先,我们要安装vue-router组件

npm install vue-router --save  
  • 1

然后我们在 resources\assets\js 目录下创建 router.jsApp.vue 文件

这里写图片描述

在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({
    routes: [
        {
            name:"test",
            path:'/',
            component: resolve =>void(require(['./components/Example.vue'], resolve))
        },
    ]
})

然后我们来修改 app.js 文件,我们需要引入刚才的路由文件,在Vue创建时添加路由和App.vue,

这里写图片描述

然后我们访问浏览器。

这里写图片描述

到这里,我们的路由配置就完成了,如果需要添加更多的路由,可以在router.js 中添加一条路由,然后路径指向相应的组件就ok了。

这里写图片描述

对应相应的文件

这里写图片描述

访问 vuxtest.cn/#/test 即出现 Test.vue 组件

这里写图片描述

有问题欢迎随时提问!!!

--------------------- 本文来自 _奔跑的蜗牛 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/mrwangweijin/article/details/78126714?utm_source=copy

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值