初识vue-element-admin

My_Oh_My 发布于2019-08-26 10:27 / 1937人阅读

摘要：最近看了一下项目，它是基于创建的项目创建项目安装默认手动选择配置，看个人项目需求支持使用书写源码支持。支持代码风格检查和格式化。权限验证那里也做了递归的处理不显示在菜单栏。组件内的在组件内使用可以拿到

最近看了一下vue-element-admin项目，它是基于vue-cli3创建的项目

创建vue-cli3项目

安装vue-cli npm install -g @vue/cli vue create project

default: 默认
Manually select features 手动（Manually）

选择配置，看个人项目需求

TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

根据项目的选择配置选择router 是否为hash 还是history css-processor 预编译环境配置 eslint一些配置

npm run serve 运行项目

项目根目录下手动新建一个 vue.config.js，一些基础的配置可参考链接描述

vue-element-admin 代码

我们在项目中可以通过process.env.NODE_ENV 可以分辨是开发环境（development）生产环境（production）无需设置 npm run serve npm run build 会自动匹配环境
在根目录下

        新建 .env.development  这个文件设置开发环境变量名
        新建.env.production 这个文件可以设置生产环境变量名
        通过process.env.变量名  拿到这两个文件的变量名

main.js

   项目的入口 
   拦截路由的功能 检测用户是否登录，用户没有登录跳转到登录页面

   // 白名单 无需登录的页面
   const whiteList = ["/login"]
   router.beforeEach((to, from, next) => {
     if(!utils.storage.get("m_userInfo")) {
       if (whiteList.indexOf(to.path) !== -1) {
         next()
       } else {
         next(`/login?redirect=${to.path}`)
       }
     } else {
       next()
     }
   })

网络请求 request.js

   封装axios 


   ```
   const ajax = axios.create({
       baseURL: process.env.VUE_APP_BASE_URL, //在.env.development  .env.production 获取base_url
       timeout: 10000
   })
   // 设置请求拦截器
   ajax.interceptors.request.use(config => { 
       let m_userInfo: any = storage.get("m_userInfo")
   
       if (m_userInfo) { 
           config.headers["access-token"] = m_userInfo.token
       }
       return config
   }, error => {
       return Promise.reject(error)
   })
   // 返回拦截器
   ajax.interceptors.response.use(
       response => {
           const {code, message, data} = response.data || {
               code: "",
               message: "",
               data: {}
           }
           if(code != 1) {
               // code 不为1的情况 弹框提示
               Message({
                   message: message || "Error",
                   type: "error",
                   duration: 5 * 1000 
               })
               return Promise.reject(message)
           } else {
               return data
           }   
       }, error => {
           return Promise.reject(error)
       }
   )
   ```

Layout 组件 (所有路由的组件都是layout)

   菜单栏 根据 router.js 配置的路由并且根据权限动态生成的，同时使用了递归组件，不管你路由多少级嵌套。权限验证那里也做了递归的处理(hidden: true 不显示在菜单栏)。
   页面 ：通过 通过this.$router.path 获取路由显示主页面

route.js

   // 异步加载路由 在meta字段设: 设置该页面的访问权限
   export const asyncRouterMap = [{
   path: "/permission",
   component: Layout,
   name: "测试权限",
   meta: { role: ["admin","editor"] }, //页面需要的权限
   children: [
   { 
     path: "index",
     component:Test,
     name: "权限测试页",
     meta: { role: ["admin","editor"] }  //页面需要的权限
   }]}]

vuex

   module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
   export default new Vuex.Store({
       modules: {
           // 组件内的 store
       }
   })
   在组件内 使用 computed：{
       ...mapGetters([
       ])
   }可以拿到 state

服务器托管专线服务 docker初识初识关系数据库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106201.html

vue-element-admin简化版

pure_admin Project description this is a pure_admin copy from vue-element-admin hahaha! Project url See pure_admin Project setup npm install Compiles and hot-reloads for development npm run serve Comp...

Object 2019-08-23 16:59 评论0 收藏0
vue2+element 管理后台集成解决方案没有没做的，只要想不到的！

摘要：目前的技术栈主要的采用由于是个人项目，所以数据请求都是用了代替。后续会出一系列的教程配套文章，如如何从零构建后台项目框架，如何做完整的用户系统如权限验证，二次登录等，如何二次开发组件如富文本，如何整合七牛等等文章，各种后台开发经验等等。完整项目地址：vue-element-admin系类文章一：手摸手，带你用vue撸后台系列一（基础篇）系类文章二：手摸手，带你用vue撸后台系列二...

sanyang 2019-08-20 16:03 评论0 收藏0
手摸手，带你用vue撸后台系列二(登录权限篇)

摘要：我们将登录按钮上绑上事件，点击登录之后向服务端提交账号和密码进行验证。所以前端和后端权限的划分是不太一致。侧边栏最后一个涉及到权限的地方就是侧边栏，不过在前完整项目地址：vue-element-admin 系列文章：手摸手，带你用vue撸后台系列一（基础篇）手摸手，带你用vue撸后台系列二(登录权限篇) 手摸手，带你用vue撸后台系列三 (实战篇) 手摸手，带你用vu...

不知名网友 2019-08-20 16:45 评论0 收藏0
vue2模拟vue-element-admin手写角色权限的实现

　　权限　　路由权限　　静态路由：固定的路由，没有权限。如login页面　　动态路由：根据不同的角色，后端返回不同的路由接口。通过meta中的roles去做筛选　　store存储路由　　3　　//地址：store/modules/permission　　import{routesasconstantRoutes}from'@/router' 　　　　//根据meta.roles去...

3403771864 2022-09-25 22:04 评论0 收藏0
手摸手，带你封装一个vue component

摘要：灵活性和针对性。所以我觉得大部分组件还是自己封装来的更为方便和灵活一些。动手开干接下来我们一起手摸手教改造包装一个插件，只要几分钟就可以封装一个专属于你的。项目地址：vue-countTo配套完整后台demo地址：vue-element-admin系类文章一：手摸手，带你用vue撸后台系列一（基础篇）系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）系类文章三：手摸手，带...

pkhope 2019-08-20 15:48 评论0 收藏0