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