找到了一个基于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