laravel 5.5.* + vue + element 之 demo

原创
2018/08/02 23:29
阅读数 91
所有 npm 命令都在 laravel 项目的根目录下执行 

1、安装 laravel:

composer create-project laravel/laravel laravel 5.5.*

2、安装 vue:

因墙的原因,node-sass 容易安装失败,在根目录新建 .npmrc 文件,写入:

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org

因 laravel 默认自带 vue, 详见 package.json 文件,所以可直接安装:

npm install

3、安装 element :

npm i element-ui -S

说明:

  • 我们编写的 js 文件全部在 /resources/assets/js 目录下
  • app.js 是构建 Vue 项目的主文件,最后所有的组件都会被引入到这个文件,
  • 在引入所有组件之前,bootstrap.js 文件做了一些初始化的操作。

4、编写 demo

  1. 修改 resources/views/welcome.blade.php 文件为:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Larvuent</title>
</head>
<body>
    <div id="app"></div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
  1. 新建文件 /resources/assets/js/components/App.vue,该文件可以认为是 element 的一个组件:
<template>
  <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>
</template>

<script>
  export default {

  }
</script>

<style>

</style>

  1. 修改 /resources/assets/js/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');

/**
 * 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.
 */

import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './components/App.vue';

Vue.use(Element);

const app = new Vue({
    el: '#app',
    render: h => h(App)
});

  1. 运行命令(参考 Laravel 之 Mix 相关文档):
    npm run dev
  1. 在浏览器打开 laravel 项目相应的 URL, 即能看到一排按钮,如下图,该按钮即 element 的按钮组件

参考:

https://github.com/lmk123/blog/issues/28

https://blog.csdn.net/mrzhouxiaofei/article/details/78015473

http://element-cn.eleme.io/#/zh-CN/component/button

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部