laravel集成vue-element-admin

1、在github上下载vue-element-admin(下称admin)

2、将admin的package.json中的dependencies与devDependencies合并到laravel的package.json中

3、将admin中的.babelrc与.eslintrc.js文件复制到laravel中

4、将admin中src的代码复制到laravel的resources\assets\admin中

5、安装依赖

npm install --registry=https://registry.npm.taobao.org

6、修改laravel中的webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');

mix.webpackConfig({
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.join(__dirname, 'resources', 'assets', 'admin')
    }
  },
  output: {
    chunkFilename: 'js/[name].[chunkhash].js',
  },
});

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/admin/main.js', 'public/js')
   // .sass('resources/assets/sass/app.scss', 'public/css');

//如果是生产环境,加上版本号
if (mix.inProduction()) {
  mix.version();
}

7、定义首页路由,及在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,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>title</title>

</head>
<body>
<div id="app">
</div>

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

8、编译即可正常运行

npm run dev

问题:

1、编译时,在某些组件里找不到某些scss文件:修改为相对路径 ../

2、成功运行,icon不显示,resources\assets\admin\icons\index.js文件修改为:

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for @/views/icons , you can delete it

// register globally
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
// const req = require.context('./svg', false, /\.svg$/)//修改前
const req = require.context('!svg-sprite-loader?{"symbolId":"icon-[name]"}!./svg', false, /.svg$/)//修改后
const iconMap = requireAll(req)

generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it

4 Comments

  1. Fayne

    const req = require.context(‘!svg-sprite-loader?{“symbolId”:”icon-[name]”}!./svg’, false, /.svg$/)//修改后

    laravel 5.7中,以上这行不工作了,不知道是webpack(laravel-mix”: “^4.0.7)版本问题或者svg-sprite-loader(svg-sprite-loader”: “^4.1.3)的问题,symbolId始终是[name], loader无法获取正确的symbolId。

    • Bowens

      的确,laravel 5.7 中 webpack 版本与 Element Admin 冲突了,现在我的解决方案是:根据 Element 组件重写了 Admin 的侧边框与上边框,这样一来也可以配合 Blade 使用了。

发表评论

电子邮件地址不会被公开。

This site uses Akismet to reduce spam. Learn how your comment data is processed.