nx-admin 项目使用教程

nx-admin 项目使用教程

nx-admin 👍 A magical 🐮 ⚔ vue admin，记得star项目地址:https://gitcode.com/gh_mirrors/nx/nx-admin

1. 项目的目录结构及介绍

nx-admin 项目的目录结构如下：

nx-admin/
├── build/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── styles/
│   ├── utils/
│   ├── views/
│   ├── App.vue
│   ├── main.js
│   └── permission.js
├── tests/
│   └── unit/
├── .editorconfig
├── .env.development
├── .env.production
├── .env.staging
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.en.md
├── README.md
├── babel.config.js
├── jest.config.js
├── jsconfig.json
├── package.json
├── postcss.config.js
└── vue.config.js

目录结构介绍

• build/: 包含项目构建的配置文件。
• public/: 包含公共资源文件，如 index.html。
• src/: 源代码目录。
  • assets/: 静态资源文件，如图片、字体等。
  • components/: 项目中使用的 Vue 组件。
  • router/: 路由配置文件。
  • store/: Vuex 状态管理文件。
  • styles/: 全局样式文件。
  • utils/: 工具函数和常量。
  • views/: 页面视图组件。
  • App.vue: 根组件。
  • main.js: 入口文件。
  • permission.js: 权限控制文件。
• tests/: 单元测试目录。
• .editorconfig: 编辑器配置文件。
• .env.*: 环境变量配置文件。
• .eslintignore: ESLint 忽略配置。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略配置。
• .travis.yml: Travis CI 配置文件。
• LICENSE: 项目许可证。
• README.en.md: 英文 README 文件。
• README.md: 中文 README 文件。
• babel.config.js: Babel 配置文件。
• jest.config.js: Jest 单元测试配置文件。
• jsconfig.json: JavaScript 配置文件。
• package.json: 项目依赖和脚本配置文件。
• postcss.config.js: PostCSS 配置文件。
• vue.config.js: Vue CLI 配置文件。

2. 项目的启动文件介绍

入口文件 main.js

main.js 是项目的入口文件，负责初始化 Vue 实例并挂载到 DOM 中。主要内容如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './permission'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

权限控制文件 permission.js

permission.js 负责路由权限控制，确保用户只能访问授权的页面。主要内容如下：

import router from './router'
import store from './store'
import { getToken } from '@/utils/auth'

const whiteList = ['/login', '/auth-redirect']

router.beforeEach((to, from, next) => {
  if (getToken()) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store.getters.roles.length === 0) {
        store.dispatch('GetInfo').then(() => {
          next()
        }).catch((err) => {
          store.dispatch('FedLogOut').then(() => {
            next({ path: '/' })
          })
        })
      } else {
        next()
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?

nx-admin 👍 A magical 🐮 ⚔ vue admin，记得star项目地址:https://gitcode.com/gh_mirrors/nx/nx-admin