Laravel5.4 + vue2.0 + Element + vux 的搭建

不多说，直接开始搭建

 

1、安装Laravel

 

 

通过 Composer Create-Project

你还可以在终端中通过 Composer 的 create-project 命令来安装 Laravel 应用：

composer create-project --prefer-dist laravel/laravel blog

详细请看Laravel5.4文档，在这里不多说。

 

2、文件配置

在根目录下有package.json这个文件，配置内容如下

<span style="color:#333333;"><span style="font-size:18px;"></span></span>

{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=./webpack.config.js",
    "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-latest": "^6.24.1",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.4",
    "element-ui": "^1.4.3",
    "es6-promise": "^4.1.0",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.8.3",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "vue-loader": "^11.3.4",
    "vue-router": "^2.4.0",
    "vue-simplemde": "^0.3.2",
    "vue-style-loader": "^2.0.0",
    "vux-loader": "^1.1.5"
  },
  "dependencies": {
    "loader": "^2.1.1",
    "style-loader": "^0.18.2",
    "vue-axios": "^2.0.2",
    "vux": "^2.5.7"
  }
}

3、安装相关依赖  npm install 
没有 npm 请自行下载，相信你已经具备相关知识，在这里不再赘述。
4、resources/assets/js下新建App.vue文件，内容如下：
<template>
<div id="app">
        <router-view></router-view>
    </div>
</template>
5、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 App from './App.vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
 
Vue.use(VueRouter)
Vue.use(ElementUI)
 
 
const router = new VueRouter({
		routes: [
			{
				path: '/',
				component: require('./components/Example.vue')
			}
		]
	})
 
const app = new Vue({
	el: '#app',
	router,
	render: h => h(App)
});

将resources/assets/js/components/Example.vue 文件,写入以下代码

<template>
     <div>
        <x-img default-src="http://img2.imgtn.bdimg.com/it/u=1078558955,3483428395&fm=26&gp=0.jpg" style="width: 100%"></x-img> 
        <search placeholder="点此搜索"></search>
        <group-title>第一期投票</group-title>
        <grid :rows="1">
          <grid-item v-for="i in 1" :key="i">
            <img src="http://placeholder.qiniudn.com/60x60/3cc51f/ffffff" alt="">
            <span class="id">编号：6666</span>
            <h4 class="name">名字</h4>
            <span class="ticket"><strong>6666</strong>票</span>
            <x-button class="vote" type="primary"> 投票 </x-button>
          </grid-item>
        </grid>
    </div> 
</template>
 
<script>
    import { Search, Grid, GridItem, GroupTitle, XImg, Panel, XButton } from 'vux'
 
    export default {
        data () {
          return {
            type: '5',
            list: [
            {
                src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                title: '标题二',
                desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
                url: {
                    path: '/component/radio',
                    replace: false
            },
                meta: {
                    source: '来源信息',
                    date: '时间',
                    other: '其他信息'
                }
            }],
                footer: {
                    title: '查看更多',
                    url: 'http://vux.li'
            }
          }
        },
        components: {
            Search,
            Grid,
            GridItem,
            GroupTitle,
            XImg,
            Panel,
            XButton
        },
    }
</script>
 
<style scoped>
    .id{
        color: #5e5e5e;
        vertical-align: top;
        position: absolute;
        left: 88px;
    }
    .name{
        display: inline-block;
        color: black;
        position: absolute;
        left: 88px;
        top: 40px;
    }
    .ticket{
        position: absolute;
        right: 165px;
        top: 59px;
        color: #5e5e5e;
    }
    .vote{
 
    }
    .grid-center {
      display: block;
      text-align: center;
      color: #666;
    }
</style>

 

附效果图：

在此说明，在package.json文件中，引入了其他组件，可能看不到这样的效果，可以去VUX官网查看文档

5、把resources/view/welcome.blade.php改为：

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<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="X-CSRF-TOKEN" content="{{csrf_token()}}">
    <title>Hello</title>
</head>
<body>
    <div id="app"></div>
    <script src="{{ asset('js/manifest.js') }}"></script>
    <script src="{{ asset('js/vendor.js') }}"></script>
      <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

6、在根目录下新建webpack.config.js文件，内容：

var path = require('path');
var webpack = require('webpack');
var Mix = require('laravel-mix').config;
var plugins = require('laravel-mix').plugins;
 
 
 
 
const webpackConfig = require('./node_modules/laravel-mix/setup/webpack.config')
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
  options: {},
  plugins: [{ name: 'vux-ui' }]
})

注意：在这里前端编译资源，用的是Laravel Mix

7、运行npm run watch

另：如遇到跨域问题，请修改resources/assets/js/bootstrap.js

这是修改过后的文件，把文件里的name的内容改为X-CSRF_TOKEN 即可

OK，基本搭建已完成，祝大家使用愉快！！！