vue admin manager
1.0.0
Some students reported an error at startup, which should be a problem with npm dependencies.
My version information is attached for reference, but all the above versions should be supported.
renew:
The main branch master is updated to dynamically load the menu:
Dynamically allocate loading menus based on user permissions, mainly through the use of addRoutes, meta, and other features.
Display data is constructed through mock.js
Demo address
A back-end R&D company, a start-up company, currently does not have web development, and gradually needs to do operation and maintenance, and the operation page, if you want to start work quickly,
I went to learn about the popular ones at present, including react, vue, and angular. After comparison, I feel that vue is the most suitable at present.
I went to the official website to get familiar with it, wrote a few demos, and then started to work on this backend. I learned from many excellent works on github, and I also
Output it so that you can review it easily.
The project is SPA, the front and back ends are separated, the front end is built using vue-cli, authentication uses JWT, the back-end database is mongodb, and the back-end provides
Restful interface, statistical function is very convenient, aggregate, mapReduce, conditions are encapsulated in the front end,
Similar to the front-end assembly of query conditions, the back-end directly spits out the corresponding results.
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# 发布测试环境 包含 webpack ananalyzer
npm run build:sit-preview
# 构建生成环境
npm run build:prod
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件（及页面）
│ ├── config // 配置项
│ ├── directive // 全局指令
│ ├── filtres // 全局filter
│ ├── mock // mock数据
│ ├── router // 路由
│ ├── store // 全局store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 第三方不打包资源
├── .babelrc // babel-loader 配置
├── .editorconfig // 代码风格文件，前提是要你的编辑器支持
├── .gitignore // 用于Git配置不需要加入版本管理的文件
├── .postcssrc.js // autoprefixer的配置文件
└── package.json // 项目依赖管理
Login authentication (currently based on JWT,) todo supports Oauth2 and third-party login
Application Overview Dashboard Various Icon Statistics
Data trends: registered users, active users, user relationships, etc.
User management currently only performs queries
Data maintenance supports viewing of videos and pictures
Collapse navigation bar completed
Completed login to obtain user nickname
Statistics icon extraction completed
Completed access to Alibaba Cloud OSS, STS (temporary authentication service)
Completed support for video playback
Vuex status management (currently only user token information is recorded)
[] The echart icon in the Dashboard, component-based reconstruction (written when using it for the first time, the code is relatively redundant, and will be split into components later)
404 page component (currently blank), consider using Tencent Charity on your own blog
[] 401 page component
[] Responsive, supports mobile phones
The Dashboard page uses the vue-echarts-v3 component. It was created by force when I first became familiar with vue. It has no aesthetic feeling at all. Later, you will gradually become familiar with and apply the idea of components.
The code still needs to be gradually optimized, haha
