02. Laravel 使用vue开发前端页面，引入Vue-elememt-admin框架

ogenes

已于 2023-08-30 21:59:31 修改

阅读量1.3k

点赞数

分类专栏： Laravel-Element-Admin 文章标签：前端 laravel vue.js

于 2023-05-01 17:57:05 首次发布

本文链接：https://blog.csdn.net/weixin_39857866/article/details/130430074

版权

Laravel-Element-Admin 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

使用vue开发前端页面

1. 引入laravel/ui

root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# composer require laravel/ui

2. 初始化Vue

root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# php artisan ui vue
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

3. 创建index模板文件

引入 app.js 和 app.css，并使用示例的那个vue组件，然后修改router/web.php路由默认到index，

root@d92a8d4c6792:/var/www/ogenes/Genes-Admin#  vim resources/views/index.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link href="{{ asset('css/app.css')  }}" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# vim routes/web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('index');
});

4. 安装依赖并运行

root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# npm install
root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# npm run dev

5. 访问 http://genes.dev.com/，可以看到

如果遇到报错：

ERROR in ./resources/js/components/ExampleComponent.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

修改 webpack.mix.js

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

引入Vue-element-template框架

1. 下载 vue-admin-template

root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# pwd
/data/www/ogenes/Genes-Admin
root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# git clone https://github.com/PanJiaChen/vue-admin-template.git

2. 合并 package.json

将 vue-admin-template 中 package.json 中的 dependencies 与 devDependencies 合并到 Laravel 的 package.json 中。

如果有冲突要以 vue-admin-template 为主。也可以直接用以下模板

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "dependencies": {
        "bin-ace-editor": "^3.2.0",
        "clipboard": "^2.0.11",
        "core-js": "^3.26.1",
        "drag-tree-table": "^2.2.0",
        "driver.js": "^0.9.8",
        "echarts": "4.2.1",
        "el-table-infinite-scroll": "^1.0.10",
        "element-theme-chalk": "^2.15.6",
        "element-ui": "^2.15.12",
        "file-saver": "^2.0.5",
        "fuse.js": "3.4.4",
        "image-conversion": "^2.1.1",
        "js-cookie": "^3.0.1",
        "normalize.css": "7.0.0",
        "nprogress": "^0.2.0",
        "path": "^0.12.7",
        "path-to-regexp": "2.4.0",
        "screenfull": "4.2.0",
        "script-loader": "^0.7.2",
        "v-calendar": "^2.4.1",
        "vue-count-to": "^1.0.13",
        "vue-cropper": "^0.5.8",
        "vue-i18n": "^8.27.2",
        "vue-json-viewer": "^2.2.22",
        "vue-resource": "^1.5.3",
        "vuex": "^3.6.2",
        "webpack": "^5.42.0"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.18.6",
        "@vue/cli-plugin-babel": "^5.0.1",
        "axios": "^0.21.1",
        "bootstrap": "^4.6.0",
        "cross-env": "^7.0",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "less": "^4.1.1",
        "less-loader": "^10.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.3.5",
        "resolve-url-loader": "^5.0.0",
        "sass": "1.26.2",
        "sass-loader": "8.0.2",
        "svg-sprite-loader": "^6.0.11",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.7",
        "vue-router": "^3.5.2",
        "vue-template-compiler": "^2.6.12"
    }
}

3. 复制文件

将 vue-element-admin 的 src 目录下的文件拷贝到 resources 中

root@d92a8d4c6792:/var/www/ogenes/Genes-Admin/resources# cp -r vue-admin-template/src resources/src

4. 安装依赖

npm cache clean --force

root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# npm install

5. 修改 webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');
/*
 |--------------------------------------------------------------------------
 | 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/src/main.js', 'public/js')
    .vue();
mix.alias({
    '@': path.join(__dirname, 'resources/src')
});

mix.webpackConfig({
    output: {
        chunkFilename: 'js/split/[name].js',
    }
});

Mix.listen('configReady', (webpackConfig) => {
    webpackConfig.module.rules.push(
        {
            test: /\.svg$/,
            loader: 'svg-sprite-loader',
            include: path.resolve(__dirname, 'resources/src/icons/svg'),
            options: {
                symbolId: 'icon-[name]',
            }
        }
    );
    let fontLoaderConfig = webpackConfig.module.rules.find(rule => String(rule.test) === String(/(\.(png|jpe?g|gif|webp|avif)$|^((?!font).)*\.svg$)/));
    fontLoaderConfig.exclude = /(resources\/src\/icons)/;
});

6. 修改入口文件

# index.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', 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>Laravel</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('/js/main.js') }}"></script>
</body>
</html>

7. 安装@babel/preset-react插件并添加在babel配置文件里

root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# npm install @babel/preset-react --save-dev
root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# vim babel.config.js

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
      'plugins': ['dynamic-import-node']
    }
  }
}

#移除无效文件
root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# rm -rf vue-admin-template/

8. 启动

root@d92a8d4c6792:/var/www/ogenes/Genes-Admin# npm run dev

9. 访问 http://genes.dev.com/，可以看到

ogenes

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
02. Laravel 使用vue开发前端页面，引入Vue-elememt-admin框架

将 vue-admin-template 中 package.json 中的 dependencies 与 devDependencies 合并到 Laravel 的 package.json 中。引入 app.js 和 app.css，并使用示例的那个vue组件，然后修改router/web.php路由默认到index，将 vue-element-admin 的 src 目录下的文件拷贝到 resources 中。如果有冲突要以 vue-admin-template 为主。也可以直接用以下模板。
复制链接

扫一扫