将基于vue js的管理模板添加到laravel应用的最佳实践

时间:2019-05-16 11:39:03

标签: laravel vue.js

找到了一个基于vue js的管理控制台https://github.com/PanJiaChen/vue-element-admin,并希望在我的基于laravel的新应用中使用它。

由于管理仪表板和laravel应用程序差异的结构,不确定,这是处理此类任务的最佳方法。

试图将scss,js文件放在laravel的资源目录中,但是面对设置不正确的路径,使用laravel mix的scss加载问题,对于任何建议的解决方案都不适合我。

我的package.json文件看起来像

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "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": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "dependencies": {
        "axios": "0.18.0",
        "clipboard": "2.0.4",
        "codemirror": "5.45.0",
        "driver.js": "0.9.5",
        "dropzone": "5.5.1",
        "echarts": "4.2.1",
        "element-ui": "2.7.0",
        "file-saver": "2.0.1",
        "js-cookie": "2.2.0",
        "jsonlint": "1.6.3",
        "jszip": "3.2.1",
        "normalize.css": "7.0.0",
        "nprogress": "0.2.0",
        "path-to-regexp": "2.4.0",
        "screenfull": "4.2.0",
        "showdown": "1.9.0",
        "sortablejs": "1.8.4",
        "tui-editor": "1.3.3",
        "vue": "2.6.10",
        "vue-count-to": "1.0.13",
        "vue-router": "3.0.2",
        "vue-splitpane": "1.0.4",
        "vuedraggable": "2.20.0",
        "vuex": "3.1.0",
        "xlsx": "0.14.1",
        "assets-webpack-plugin": "^3.9.6",
        "babel-preset-es2015": "^6.24.1",
        "bootstrap-sass": "^3.3.7",
        "fast-sass-loader": "^1.4.5"
    },
    "devDependencies": {
        "@babel/core": "7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/register": "7.0.0",
        "@vue/cli-plugin-babel": "3.5.3",
        "@vue/cli-plugin-eslint": "3.5.1",
        "@vue/cli-plugin-unit-jest": "^3.7.0",
        "@vue/cli-service": "3.5.3",
        "@vue/test-utils": "1.0.0-beta.29",
        "autoprefixer": "^9.5.1",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "10.0.1",
        "babel-jest": "23.6.0",
        "babel-loader": "^8.0.6",
        "bootstrap": "^4.0.0",
        "chalk": "2.4.2",
        "chokidar": "2.1.5",
        "connect": "3.6.6",
        "cross-env": "^5.1",
        "css-loader": "^2.1.1",
        "eslint": "5.15.3",
        "eslint-plugin-vue": "5.2.2",
        "fuse.js": "3.4.4",
        "html-webpack-plugin": "3.2.0",
        "husky": "1.3.1",
        "jquery": "^3.2",
        "laravel-mix": "3.*",
        "lint-staged": "8.1.5",
        "lodash": "^4.17.5",
        "mockjs": "1.0.1-beta3",
        "node-sass": "^4.12.0",
        "plop": "2.3.0",
        "popper.js": "^1.12",
        "postcss-loader": "^3.0.0",
        "resolve-url-loader": "^2.3.1",
        "runjs": "^4.3.2",
        "sass": "^1.15.3",
        "sass-loader": "^7.1.0",
        "script-ext-html-webpack-plugin": "2.1.3",
        "script-loader": "0.7.2",
        "serve-static": "^1.13.2",
        "style-loader": "^0.23.1",
        "svg-sprite-loader": "4.1.3",
        "svgo": "1.2.0",
        "vue-resource": "^1.5.1",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^3.12.0",
        "webpack-assets-manifest": "^1.0.0",
        "webpack-build-notifier": "^0.1.28",
        "webpack-bundle-analyzer": "^2.13.1",
        "webpack-clean-obsolete-chunks": "^0.4.0",
        "webpack-cleanup-plugin": "^0.5.1",
        "webpack-cli": "^3.1.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.4"
    }
}

和我的app.scss文件


// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

这个我无法解决的特定错误

  

./ node_modules / css-loader / dist / cjs.js ?? ref--5-2!./ node_modules / postcss-loader / src ?? postcss!./ node_modules / resolve-url-loader中的错误? ref--5-4!./ node_modules / sass-loader / lib / loader.js ?? ref--5-5!./ node_modules / style-loader!./ node_modules / css-loader / dist / cjs。 js!./ node_modules / sass-loader / lib / loader.js!./ node_modules / postcss-loader / src!./ resources / sass / app.scss

0 个答案:

没有答案