Commit a0ea7efe9c0042b4d7b755270801f94cd32516e8
0 parents
init
Showing
9 changed files
with
324 additions
and
0 deletions
.gitignore
0 → 100644
| 1 | +++ a/.gitignore | ||
| 1 | +.DS_Store | ||
| 2 | +yarn.lock | ||
| 3 | +node_modules | ||
| 4 | +package-lock | ||
| 5 | +package-lock.json | ||
| 6 | +/dist | ||
| 7 | +dist.zip | ||
| 8 | +/public/font_family | ||
| 9 | + | ||
| 10 | +# local env files | ||
| 11 | +.env.local | ||
| 12 | +.env.*.local | ||
| 13 | + | ||
| 14 | +# Log files | ||
| 15 | +npm-debug.log* | ||
| 16 | +yarn-debug.log* | ||
| 17 | +yarn-error.log* | ||
| 18 | +pnpm-debug.log* | ||
| 19 | + | ||
| 20 | +# Editor directories and files | ||
| 21 | +.idea | ||
| 22 | +.vscode | ||
| 23 | +*.suo | ||
| 24 | +*.ntvs* | ||
| 25 | +*.njsproj | ||
| 26 | +*.sln | ||
| 27 | +*.sw? | ||
| 28 | +src/views/portrait/test.vue |
.postcssrc.js
0 → 100755
README.md
0 → 100644
| 1 | +++ a/README.md | ||
| 1 | +-开发环境 | ||
| 2 | +- node.js v8.0+ | ||
| 3 | +- git | ||
| 4 | + | ||
| 5 | +-技术栈 | ||
| 6 | +- ES6+ | ||
| 7 | +- vue v2.5+ | ||
| 8 | +- vue-router | ||
| 9 | +- vuex | ||
| 10 | +- axios | ||
| 11 | +- scss | ||
| 12 | +- element-ui v2.4+ | ||
| 13 | + | ||
| 14 | +- 实现功能 | ||
| 15 | + | ||
| 16 | +- 登录、退出 | ||
| 17 | ++ 基于token | ||
| 18 | + - 状态拦截、404页面 | ||
| 19 | + - 动态加载路由 | ||
| 20 | + - 页面、按钮指令权限管理 | ||
| 21 | + - 无限级菜单 | ||
| 22 | +- 封装vue-i18n@8.x国际化组件 | ||
| 23 | +- 系统全屏化 | ||
| 24 | + | ||
| 25 | +# 安装依赖 (如果安装失败就多安装几次，实在不行就换淘宝镜像) | ||
| 26 | +yarn or yarn install | ||
| 27 | +or | ||
| 28 | +npm install | ||
| 29 | + | ||
| 30 | +# 启动项目 (已经配置好启动服务自动打开浏览器，如果没自动打开按照控制台输出的地址自己打开) | ||
| 31 | +# 如果eslint语法检查报错，直接关掉eslint语法检查 | ||
| 32 | +yarn dev | ||
| 33 | +or | ||
| 34 | +npm run dev | ||
| 35 | + | ||
| 36 | +# 启动编译打包 生产环境 | ||
| 37 | +yarn build | ||
| 38 | +or | ||
| 39 | + npm run build | ||
| 0 | \ No newline at end of file | 40 | \ No newline at end of file |
babel.config.js
0 → 100644
package.json
0 → 100755
| 1 | +++ a/package.json | ||
| 1 | +{ | ||
| 2 | + "name": "vue-admin", | ||
| 3 | + "version": "1.0.0", | ||
| 4 | + "private": true, | ||
| 5 | + "scripts": { | ||
| 6 | + "serve": "vue-cli-service serve", | ||
| 7 | + "build": "vue-cli-service build", | ||
| 8 | + "lint": "vue-cli-service lint" | ||
| 9 | + }, | ||
| 10 | + "dependencies": { | ||
| 11 | + "core-js": "^3.6.5", | ||
| 12 | + "echarts": "5.3.2", | ||
| 13 | + "element-ui": "^2.15.1", | ||
| 14 | + "js-cookie": "^2.2.0", | ||
| 15 | + "jsencrypt": "^3.2.0", | ||
| 16 | + "nprogress": "^0.2.0", | ||
| 17 | + "font-awesome": "^4.7.0", | ||
| 18 | + "vue": "^2.6.11", | ||
| 19 | + "vue-i18n": "^8.4.0", | ||
| 20 | + "vue-router": "^3.5.1", | ||
| 21 | + "axios": "^0.21.1", | ||
| 22 | + "vuex": "^3.6.2" | ||
| 23 | + }, | ||
| 24 | + "devDependencies": { | ||
| 25 | + "@vue/cli-plugin-babel": "~4.5.0", | ||
| 26 | + "@vue/cli-service": "~4.5.0", | ||
| 27 | + "autoprefixer": "^7.1.2", | ||
| 28 | + "babel-core": "^6.22.1", | ||
| 29 | + "babel-loader": "^7.1.1", | ||
| 30 | + "babel-eslint": "^10.1.0", | ||
| 31 | + "eslint": "^6.7.2", | ||
| 32 | + "eslint-plugin-vue": "^6.2.2", | ||
| 33 | + "extract-text-webpack-plugin": "^3.0.0", | ||
| 34 | + "html-webpack-plugin": "^4.2.0", | ||
| 35 | + "mini-css-extract-plugin": "^0.9.0", | ||
| 36 | + "node-sass": "^4.13.0", | ||
| 37 | + "sass-loader": "^7.1.0", | ||
| 38 | + "postcss-import": "^12.0.1", | ||
| 39 | + "postcss-loader": "^3.0.0", | ||
| 40 | + "postcss-url": "^7.2.1", | ||
| 41 | + "optimize-css-assets-webpack-plugin": "^3.2.0", | ||
| 42 | + "vue-template-compiler": "^2.5.2" | ||
| 43 | + } | ||
| 44 | +} |
public/index.html
0 → 100644
| 1 | +++ a/public/index.html | ||
| 1 | +<!DOCTYPE html> | ||
| 2 | +<html lang=""> | ||
| 3 | + | ||
| 4 | +<head> | ||
| 5 | + <meta charset="utf-8"> | ||
| 6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| 7 | + <meta name="viewport" content="width=device-width,initial-scale=1.0"> | ||
| 8 | + <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | ||
| 9 | + <title> | ||
| 10 | + <%= htmlWebpackPlugin.options.title %> | ||
| 11 | + </title> | ||
| 12 | +</head> | ||
| 13 | + | ||
| 14 | +<body> | ||
| 15 | + <noscript> | ||
| 16 | + <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. | ||
| 17 | + Please enable it to continue.</strong> | ||
| 18 | + </noscript> | ||
| 19 | + <div id="app"></div> | ||
| 20 | + <!-- built files will be auto injected --> | ||
| 21 | +</body> | ||
| 22 | + | ||
| 23 | +</html> | ||
| 0 | \ No newline at end of file | 24 | \ No newline at end of file |
src/App.vue
0 → 100644
| 1 | +++ a/src/App.vue | ||
| 1 | +<template> | ||
| 2 | + <div id="app"> | ||
| 3 | + <transition name="fade" mode="out-in"> | ||
| 4 | + <router-view></router-view> | ||
| 5 | + </transition> | ||
| 6 | + </div> | ||
| 7 | +</template> | ||
| 8 | + | ||
| 9 | +<script> | ||
| 10 | +export default { | ||
| 11 | + name: "app" | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +</script> | ||
| 15 | + | ||
| 16 | +<style lang="scss"> | ||
| 17 | +body { | ||
| 18 | + margin: 0px; | ||
| 19 | + padding: 0px; | ||
| 20 | + font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, SimSun, sans-serif; | ||
| 21 | + font-size: 14px; | ||
| 22 | + -webkit-font-smoothing: antialiased; | ||
| 23 | +} | ||
| 24 | + | ||
| 25 | +#app { | ||
| 26 | + position: absolute; | ||
| 27 | + top: 0px; | ||
| 28 | + bottom: 0px; | ||
| 29 | + width: 100%; | ||
| 30 | +} | ||
| 31 | +a{ | ||
| 32 | + color: #56a9ff; | ||
| 33 | +} | ||
| 34 | +.fade-enter-active, | ||
| 35 | +.fade-leave-active { | ||
| 36 | + transition: all .2s ease; | ||
| 37 | +} | ||
| 38 | + | ||
| 39 | +.fade-enter, | ||
| 40 | +.fade-leave-active { | ||
| 41 | + opacity: 0; | ||
| 42 | +} | ||
| 43 | +#nprogress .bar { | ||
| 44 | + height: 3px !important; | ||
| 45 | + background: #56a9ff !important; //自定义颜色 | ||
| 46 | +} | ||
| 47 | +</style> |
src/main.js
0 → 100755
| 1 | +++ a/src/main.js | ||
| 1 | +// The Vue build version to load with the `import` command | ||
| 2 | +// (runtime-only or standalone) has been set in webpack.base.conf with an alias. | ||
| 3 | +import Vue from "vue" | ||
| 4 | +import ElementUI from "element-ui" | ||
| 5 | +import App from "./App.vue" | ||
| 6 | +import router from "./router" | ||
| 7 | +import store from "./store" | ||
| 8 | +import i18n from "./i18n/i18n" | ||
| 9 | +import globalPlugin from "./utils/global" | ||
| 10 | +import permission from "./directive/permission/button" | ||
| 11 | +import NProgress from "nprogress" | ||
| 12 | + | ||
| 13 | +import "nprogress/nprogress.css" | ||
| 14 | +import "element-ui/lib/theme-chalk/index.css" | ||
| 15 | +import "font-awesome/css/font-awesome.css" | ||
| 16 | +import "@/router/permission" | ||
| 17 | + | ||
| 18 | +Vue.config.productionTip = false | ||
| 19 | +Vue.use(ElementUI) | ||
| 20 | +Vue.use(globalPlugin) | ||
| 21 | +Vue.use(permission) | ||
| 22 | + | ||
| 23 | +NProgress.inc(0.2) | ||
| 24 | +NProgress.configure({ easing: "ease", speed: 500, showSpinner: false }) | ||
| 25 | + | ||
| 26 | +/* eslint-disable no-new */ | ||
| 27 | +new Vue({ | ||
| 28 | + el: "#app", | ||
| 29 | + router, | ||
| 30 | + store, | ||
| 31 | + i18n, | ||
| 32 | + render: h => h(App), | ||
| 33 | + components: {App}, | ||
| 34 | + template: "<App/>" | ||
| 35 | +}) |
vue.config.js
0 → 100644
| 1 | +++ a/vue.config.js | ||
| 1 | +const path = require("path"); | ||
| 2 | +const resolve = (dir) => path.join(__dirname, dir); | ||
| 3 | +const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV); | ||
| 4 | +const BundleAnalyzerPlugin = require("webpack-bundle-analyzer") | ||
| 5 | + .BundleAnalyzerPlugin; | ||
| 6 | + | ||
| 7 | +module.exports = { | ||
| 8 | + publicPath: "./", // 编译后的地址，可以根据环境进行设置 | ||
| 9 | + outputDir: "dist", // 生产环境构建文件的目录 | ||
| 10 | + assetsDir: "static", // 静态文件目录 | ||
| 11 | + lintOnSave: false, //是否开启编译时是否不符合eslint提示 | ||
| 12 | + productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 | ||
| 13 | + devServer: { | ||
| 14 | + hot:true, | ||
| 15 | + port: 8080, // 端口 | ||
| 16 | + open: false, // 启动后打开浏览器 | ||
| 17 | + compress: true, | ||
| 18 | + overlay: { | ||
| 19 | + // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层 | ||
| 20 | + warnings: false, | ||
| 21 | + errors: true, | ||
| 22 | + }, | ||
| 23 | + proxy: { | ||
| 24 | + "/": { | ||
| 25 | + target:"http://lead.xc.com:32269", | ||
| 26 | + changeOrigin: true, | ||
| 27 | + ws:true, | ||
| 28 | + }, | ||
| 29 | + }, | ||
| 30 | + disableHostCheck: true | ||
| 31 | + }, | ||
| 32 | + css: { | ||
| 33 | + extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。 | ||
| 34 | + sourceMap: false, | ||
| 35 | + }, | ||
| 36 | + chainWebpack: (config) => { | ||
| 37 | + config.plugin('html').tap(args => { | ||
| 38 | + args[0].title = '云平台'; | ||
| 39 | + return args; | ||
| 40 | + }); | ||
| 41 | + config.resolve.alias | ||
| 42 | + .set("@", resolve("src")) | ||
| 43 | + .set("assets", resolve("src/assets")) | ||
| 44 | + .set("components", resolve("src/components")) | ||
| 45 | + .set("router", resolve("src/router")) | ||
| 46 | + .set("utils", resolve("src/utils")) | ||
| 47 | + .set("store", resolve("src/store")) | ||
| 48 | + .set("views", resolve("src/views")) | ||
| 49 | + .set("api", resolve("src/api")); | ||
| 50 | + if (IS_PROD) { | ||
| 51 | + config.plugin("webpack-report").use(BundleAnalyzerPlugin, [ | ||
| 52 | + { | ||
| 53 | + analyzerMode: "static", | ||
| 54 | + }, | ||
| 55 | + ]); | ||
| 56 | + } | ||
| 57 | + config.when(IS_PROD, (config) => { | ||
| 58 | + config.devtool("cheap-source-map"); | ||
| 59 | + config | ||
| 60 | + .plugin("ScriptExtHtmlWebpackPlugin") | ||
| 61 | + .after("html") | ||
| 62 | + .use("script-ext-html-webpack-plugin") | ||
| 63 | + .end(); | ||
| 64 | + config.optimization.splitChunks({ | ||
| 65 | + chunks: "all", | ||
| 66 | + cacheGroups: { | ||
| 67 | + // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块 | ||
| 68 | + commons: { | ||
| 69 | + name: "chunk-commons", | ||
| 70 | + test: resolve("src/components"), | ||
| 71 | + minChunks: 3, // 被至少用三次以上打包分离 | ||
| 72 | + priority: 5, // 优先级 | ||
| 73 | + reuseExistingChunk: true, // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。 | ||
| 74 | + }, | ||
| 75 | + node_vendors: { | ||
| 76 | + name: "chunk-libs", | ||
| 77 | + chunks: "initial", // 只打包初始时依赖的第三方 | ||
| 78 | + test: /[\\/]node_modules[\\/]/, | ||
| 79 | + priority: 10, | ||
| 80 | + }, | ||
| 81 | + elementUI: { | ||
| 82 | + name: "chunk-elementUI", // 单独将 elementUI 拆包 | ||
| 83 | + priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的 | ||
| 84 | + test: /[\\/]node_modules[\\/]_?element(.*)/, | ||
| 85 | + }, | ||
| 86 | + }, | ||
| 87 | + }); | ||
| 88 | + config.optimization.runtimeChunk("single"); | ||
| 89 | + config.optimization.minimize(true); | ||
| 90 | + }); | ||
| 91 | + }, | ||
| 92 | +}; | ||
| 93 | + |