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

来源：互联网发布：热力学计算软件小木虫编辑：程序博客网时间：2024/06/05 10:58

不多说，直接开始搭建

1、安装Laravel

通过 Composer Create-Project

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

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

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

2、文件配置

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

{  "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，基本搭建已完成，祝大家使用愉快！！！

阅读全文

1 0

热力学计算软件小木虫

原创粉丝点击