按照官方文檔,進行安裝:php
composer create-project --prefer-dist laravel/laravel laravel-vue-admin
css
$ git clone https://github.com/PanJiaChen/vue-element-admin.git
將 vue-element-admin 中 package.json
中的 dependencies
與devDependencies
合併到 Laravel 的 package.json
中。html
版本以 vue-element-admin 的版本爲準前端
將 vue-element-admin 中整個 src
目錄下的文件複製到 laravel 項目中的 resources/backend
目錄中。vue
$ npm install
node
修改 webpack.mix.js
爲:webpack
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.js('resources/backend/main.js', 'public/js')
在 resources/views
中添加 admin.blade.php
視圖文件,代碼以下:ios
<!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>
在 routes/web.php
文件中添加以下路由:nginx
Route::get('/admin', function () { return view('admin'); });
$ npm run dev
laravel
打開瀏覽器便可看的內容
@
未定義$ npm run dev
報錯以下:
ERROR in ./resources/backend/router/index.js Module not found: Error: Can't resolve '@/views/zip/index' in '/path/to/laravel-vue-admin/resources/backend/router' @ ./resources/backend/router/index.js 365:13-40 @ ./resources/backend/main.js @ multi ./resources/backend/main.js
解決方法:在 webpack.mix.js
添加以下代碼:
mix.webpackConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'resources/backend'), }, }, })
70%
沒法繼續> @ dev /path/to/laravel-vue-admin > npm run development > @ development /path/to/laravel-vue-admin > cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js 70% building 2069/2069 modules 0 active
通過查找,找到文檔,解決方法以下:
$ npm install babel-plugin-dynamic-import-node --save-dev
webpack.mix.js
具體以下:
mix.webpackConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'resources/backend'), } } }) // 此處新增 .babelConfig({ plugins: ['dynamic-import-node'] });
/deep/
解析失敗ERROR in ./resources/backend/components/HeaderSearch/index.vue?vue&type=style&index=0&id=6eba4ace&lang=scss&scoped=true& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./node_modules/vue-loader/lib??vue-loader-options!./resources/backend/components/HeaderSearch/index.vue?vue&type=style&index=0&id=6eba4ace&lang=scss&scoped=true&) Module build failed (from ./node_modules/sass-loader/lib/loader.js): /deep/ .el-input__inner { ^ Expected selector. ╷ 172 │ /deep/ .el-input__inner{ │ ^ ╵ stdin 172:5 root stylesheet
這裏應該是版本兼容問題。須要將全部 backend
目錄中出現的 /deep/
替換爲 >>>
。
ERROR in ./resources/backend/main.js Module not found: Error: Can't resolve '../mock' in '/path/to/laravel-vue-admin/resources/backend' @ ./resources/backend/main.js 31:0-34 @ multi ./resources/backend/main.js
這個解決方案看你須要,若是你須要mock接口,那麼須要複製原 vue-element-admin 中的 mock 文件夾到 resources/mock
便可。
若是不須要,則須要將依賴 mock
資源的代碼刪掉。
涉及 resources/backendmain.js
ERROR in ./resources/backend/layout/components/Sidebar/Item.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/backend/layout/components/Sidebar/Item.vue?vue&type=script&lang=js&) Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /path/to/laravel-vue-admin/resources/backend/layout/components/Sidebar/Item.vue: Unexpected token (20:18) 18 | 19 | if (icon) { > 20 | vnodes.push(<svg-icon icon-class={icon}/>) | ^ 21 | }
經查詢爲 bable 沒有正確配置,直接複製 vue-element-admin 中 babel.config.js
便可。
找了許久,沒有一個方法能夠完美解決。後來根據文章找到思路
Mix.listen('configReady', (webpackConfig) => { // Exclude 'svg' folder from font loader let fontLoaderConfig = webpackConfig.module.rules.find(rule => String(rule.test) === String(/(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/)); fontLoaderConfig.exclude = /(resources\/backend\/icons)/; }); mix.webpackConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'resources/backend'), } }, module: { rules: [ { test: /\.svg$/, loader: 'svg-sprite-loader', include: [path.resolve(__dirname, 'resources/backend/icons/svg')], options: { symbolId: 'icon-[name]' } } ], } }).babelConfig({ plugins: ['dynamic-import-node'] });
而後完美執行:
DONE Compiled successfully in 19433ms 10:33:44 AM Asset Size Chunks Chunk Names /css/app.css 174 KiB /js/app [emitted] /js/app /js/app.js 1.38 MiB /js/app [emitted] /js/app /js/main.js 14.8 MiB /js/main [emitted] /js/main fonts/element-icons.ttf?27c72091ab590fb5d1c3ef90f988ddce 10.8 KiB [emitted] fonts/element-icons.woff?9b70ee41d12a1cf127400d23534f7efc 5.98 KiB [emitted] fonts/vendor/element-ui/lib/theme-chalk/element-icons.ttf?6f0a76321d30f3c8120915e57f7bd77e 10.8 KiB [emitted] fonts/vendor/element-ui/lib/theme-chalk/element-icons.woff?2fad952a20fbbcfd1bf2ebb210dccf7a 6.02 KiB [emitted] images/401.gif?089007e721e1f22809c0313b670a36f1 160 KiB [emitted] images/404.png?a57b6f31fa77c50f14d756711dea4158 95.8 KiB [emitted] images/404_cloud.png?0f4bc32b0f52f7cfb7d19305a6517724 4.65 KiB [emitted] images/vendor/tui-editor/dist/tui-editor-2x.png?b4361244b610df3a6c728a26a49f782b 23.9 KiB [emitted] images/vendor/tui-editor/dist/tui-editor.png?30dd0f529e5155cab8a1aefa4716de7f 10.6 KiB [emitted]
mix.js('resources/backend/main.js', 'public/js').extract(['vue', 'axios']);
if (mix.inProduction()) { mix.version(); }
admin.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/manifest.js') }}"></script> <script src="{{ mix('/js/vendor.js') }}"></script> <script src="{{ mix('/js/main.js') }}"></script> </body> </html>
webpack.mix.js
const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | 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.listen('configReady', (webpackConfig) => { // Exclude 'svg' folder from font loader let fontLoaderConfig = webpackConfig.module.rules.find(rule => String(rule.test) === String(/(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/)); fontLoaderConfig.exclude = /(resources\/backend\/icons)/; }); mix.webpackConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'resources/backend'), } }, module: { rules: [ { test: /\.svg$/, loader: 'svg-sprite-loader', include: [path.resolve(__dirname, 'resources/backend/icons/svg')], options: { symbolId: 'icon-[name]' } } ], } }).babelConfig({ plugins: ['dynamic-import-node'] }); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.js('resources/backend/main.js', 'public/js').extract(['vue', 'axios']); if (mix.inProduction()) { mix.version(); }
必定要多查看文檔,在文檔不能知足的狀況下,多進行檢索查詢。尤爲是圖標沒法顯示這個問題,我在QQ羣、Gitter上也有過諮詢,沒人回覆。
還有,就是多多嘗試。像圖標這個問題,我也是屢次打印 webpacke config
輸出與原框架包中的輸出作比較。
附上倉庫地址 https://github.com/Honvid/lar...
just do it.