创建 Laravel 项目
按照官方文档,进行安装:
composer create-project --prefer-dist laravel/laravel laravel-vue-admin
下载 vue-element-admin
$ git clone https://github.com/PanJiaChen/vue-element-admin.git
初始化package
将 vue-element-admin 中 package.json
中的 dependencies
与devDependencies
合并到 Laravel 的 package.json
中。
版本以 vue-element-admin 的版本为准
复制文件
将 vue-element-admin 中整个 src
目录下的文件复制到 laravel 项目中的 resources/backend
目录中。
安装前端依赖
$ npm install
添加打包语句
修改 webpack.mix.js
为:
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
视图文件,代码如下:
<!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
文件中添加如下路由:
Route::get('/admin', function () {
return view('admin');
});
配置nginx
启动
$ npm run dev
打开浏览器即可看的内容
问题集合
别名@
未定义
$ 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']
});
sass 中 /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/
替换为 >>>
。
mock 资源无法加载
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
bable 失败
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
即可。
图标不显示
找了许久,没有一个方法可以完美解决。后来根据文章找到思路
- 覆盖原始图片加载规则
- 新增svg图片的加载
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.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。