part01~开发通用前端UI框架

通用企业级前端 UI 框架

项目介绍

此项目一套开箱即用的中后台前端框架,这个项目就从 0 到 1 实现

  • 该项目优点:
    • 功能齐全
    • 从零搭建前端架构,提高你的单兵作战的能力
    • 技术点应用全面,综合查缺补漏
    • 关于权限管理是个大亮点哟

template 和 jsx 的区别

  • template
    • HTML 扩展的语法
    • 数据使用 Mustache(双括号)
    • 优点:学习成本低,大量指令,组件作用域 css,但是灵活性低
  • jsx
    • JS 语法扩展
    • 数据绑定使用单引号
    • 优点:灵活
  • 怎么选择:组件基本可以分成两类,一类偏视图表现,一类偏逻辑处理
  • 视图表现,很明显 template 更加合适
  • 逻辑处理,jsx 或者直接使用渲染函数(vue 中 render 函数)
  • 但是:无论你选哪个,其实,这都是语法糖最终都是使用 createElement 而已

创建项目

vue create vue-public-ui

  • 选择自定义:Manually select features
  • 使用 history 路由
  • ESLint+Prettier(Lint on save 和 Lint and fix on commit)
  • 单元测试 Jest
  • 配置文件独立(In dedicated config files)
  • Sava this as a preset for future projects? 是否保存当前设置以后新建项目就直接用 YES

安装组件库

ui 组件库

  • yarn add ant-design-vue

    日期处理库

  • yarn add moment

配置个性化 webpack 和 babel

配置 ant-design-vue

  • 引入组件,全局注册

  • main.js

    • import Antd from “ant-design-vue”;
    • Vue.use(Antd);
  • 引入 antd 的样式

  • main.js

    • import “ant-design-vue/dist/antd.less”;
    • 注意:此时会报错,不能解析 less

此时延申的一个问题,我们自定义项目配置时,需要遵循 vue-cli 标准,所以我们去看一下 vue-cli 中怎么配置 less 的 loader

  • 官网 https://cli.vuejs.org/
  • 新建 vue.config.js 导出配置模块

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true // 重点是这句
      }
    }
  }
}

// 配置完需要重启,因为我们修改的是配置
// 至此,我们可以全局使用antd组件了

配置 ant-design-vue 按需加载

比如我们使用了 ant-design-vue 这个 ui 库,这个库本身体积很大,但我们项目中或许只用了 button,那么将所有的资源加载下来是很笨重的,但是每个地方用到了再去引入也很繁琐,所以我们采用按需加载策略

  • 注意看官网:https://www.antdv.com/docs/vue/use-with-vue-cli-cn/

    • 高级配置部分
  • 安装按需加载 babel

    • yarn add babel-plugin-import --dev
  • 根据官网提示

babel.config.js

plugins: [
  [
    'import',
    { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }
  ]
]

main.js

// 此时通过以上配置我们直接可以引入我们需要的组件类型
import { Button } from 'ant-design-vue'

// 修改了配置项,记得重启

如何设计高扩展性路由

router>index.js

    // 采用复合组合路由形式
    path: "/user",
    component: { render: h => h("router-view") }, // 重点解释这一句,这里通过render函数将路由页面渲染。
    // 但是思考问题,很多情况下登录页和注册页长得很像,那这公共的部分不想重复写的话怎么处理好?
    children: [
      {
        path: "/user/login",
        name: "login",
        component: () => {
          return import(
            /* webpackChunkName: "user" */ "../views/User/Login.vue" // 解释一下注释部分:说白了就是告诉webpack将这个代码打包到user代码块中,业务聚合
          );
        }
      },
      {
        path: "/user/register",
        name: "register",
        component: () => {
          return import(
            /* webpackChunkName: "user" */ "../views/User/Register.vue"
          );
        }
      }
    ]
  },

使用公共布局

-解决问题:解决背景公共布局的问题

  • 例:
  • 新建 layout 文件夹
  • 新建 UserLayout.vue 文件

UserLayout.vue

<template>
  <div class="user-layout">
    <div class="desc">vue-public-ui</div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped></style>

使用公共布局

router>index.js

    // 采用复合组合路由形式
    path: "/user",
    component: () => {
          return import(
            /* webpackChunkName: "user" */ "../Layout/UserLayout.vue" //使用布局也
          );
        },
    children: [
      {
        path: "/user/login",
        name: "login",
        component: () => {
          return import(
            /* webpackChunkName: "user" */ "../views/User/Login.vue" // 解释一下注释部分:说白了就是告诉webpack将这个代码打包到user代码块中,业务聚合
          );
        }
      },
      {
        path: "/user/register",
        name: "register",
        component: () => {
          return import(
            /* webpackChunkName: "user" */ "../views/User/Register.vue"
          );
        }
      }
    ]
  },

页面重定向问题

  • 解决问题:比如上面的页面,我们使用嵌套路由,那如果用户输入 user 呢?
  • 简单,重定向到 login 页面或者你想要的其他的页面
    // 采用复合组合路由形式
    path: "/user",
    component: () => {
          return import(
            /* webpackChunkName: "user" */ "../Layout/UserLayout.vue" //使用布局也
          );
        },
    children: [
      {
       path:"/user",
       retdirect:'/user/login' // 页面重定向
      },
      {
        path: "/user/login",
        name: "login",
        component: () => {
          return import(
            /* webpackChunkName: "user" */ "../views/User/Login.vue" // 解释一下注释部分:说白了就是告诉webpack将这个代码打包到user代码块中,业务聚合
          );
        }
      },
      {
        path: "/user/register",
        name: "register",
        component: () => {
          return import(
            /* webpackChunkName: "user" */ "../views/User/Register.vue"
          );
        }
      }
    ]
  },

404 页面配置

  • 解决问题:你不能保证覆盖所有路由,所以需要在不存在的路由时,用 404 提高体验度

router>index.js

 import NotFond from "@/views/404";
  // 404页面
  {
    path: "*",
    name: "404",
    component: NotFond
  }

使用 NProgress 进度条提高页面交互体验

  • NProgress 加载进度条
    • 使用步骤:
      • 安装:yarn add nprogress
      • import NProgress from “nprogress”;
      • import “nprogress/nprogress.css”;

路由守卫

  • 所谓的路由守卫就是 vue-router 暴露出来的一个钩子函数,用来在切换路由时执行

    router>index.js

router.beforeEach((to, from, next) => {
  // 路由切换时,出现进度条,提高交互体验
  NProgress.start()
  next()
})
router.afterEach((to, from, next) => {
  NProgress.done()
  next()
})

使用 Atd-vue 布局

  • 查看 atd 文档,找到符合我们理想布局的样式,粘贴代码到 BasicLayput.vue
  • 在 Main.js 中注册 Layout 组件
  • 根据 api 可以自由配置样式,如菜单栏收放的功能
  • 自行研究官方文档去

Tips Antd 代码提示小技巧

vsCode-> 应用商店-> Ant Deisign Vue helper

页面风格设置抽屉

  • 解决的问题

    • 点击按钮,页面窗口右侧弹出主题选择项
  • 使用步骤

    • Antd 选抽屉组件
    • component 中新建 SettingDrawer 组件,将 Antd 的组件复制进去
    • 在 layout->baseicLayout 中引入 SettingDrawer 组件
    • 如果报错,没有注册某组件,那就回到 main.js 中统一引入,全局注册即可

修改抽屉入口按钮

  • 删掉按钮和多余的方法
  • 添加一个插槽
     // 根据文档插槽指向handle
     <template v-slot:handle>
     <div class="handle" @click="visible = !visible">
       // 使用一个icon作为标志
       <a-icon :type="visible ? 'close' : 'setting'"></a-icon>
     </div>
   </template>
  • 修改插槽标记的样式
.handle {
  position: absolute;
  top: 300px;
  right: 268px;
  background-color: saddlebrown;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #1890ff;
  border-radius: 5px;
  color: white;
}

设计主题

  • components->SettingDrawer->index.vue
<a-drawer
  :placement="placement"
  :closable="false"
  @close="onClose"
  :visible="visible"
>
  <template v-slot:handle>
    <div class="handle" @click="visible = !visible">
      <a-icon :type="visible ? 'close' : 'setting'">a-icon>
    div>
  template>
  
  <div>
    <h2>整体风格设置h2>
    <a-radio-group
      @change="e => handleSettingChange('navTheme', e.target.value)"
      :value="this.$route.query.navTheme || 'dark'"
    >
      <a-radio value="dark">黑色a-radio>
      <a-radio value="white">白色a-radio>
    a-radio-group>
    <h2>导航模式h2>
    <a-radio-group
      @change="e => handleSettingChange('navLayout', e.target.value)"
      :value="this.$route.query.navLayout || 'left'"
    >
      <a-radio value="left">左侧a-radio>
      <a-radio value="top">顶部a-radio>
    a-radio-group>
  div>
a-drawer>
    handleSettingChange(type, value) {
      console.log('类型', type)
      console.log('类型', value)
      this.$router.push({ query: { ...this.$route.query, [type]: value } }) // 通知路由风格设计
    }

设置全局风格

  • Layouts->BasicLayout.vue

    • 新增计算属性
      // 通过路由来判断用户设置的全局皮肤数据
      computed: {
       navTheme() {
       return this.$route.query.navTheme || 'dark'
       },
     navLayout() {
       return this.$route.query.navLayout || 'left'
     }
    }
    
    • 布局页最外层设置全局皮肤
    <template>
      
      <div :class="[`nav-theme-${navTheme}`, `nav-layout-${navLayout}`]">div>
    template>
    
    • 设置侧边栏的样式
    <a-layout-sider
      :theme="navTheme"
      v-if="navLayout === 'left'"
      :trigger="null"
      collapsible
      v-model="collapsed"
    >
    a-layout-sider>
    
    • 设置 logo 基本样式
    // 确保在切换主题的时候,文字相关的可以不受影响
    .nav-theme-dark .logo {
      color: #ffffff;
    }
    

    去掉切换主题时的进度条

    • 切换主题还是路由的变换
    • router->index
    // 路由守卫
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    router.beforeEach((to, from, next) => {
      // 只有在路由地址发生变化时触发进度条
      if (to.path != from.path) {
        NProgress.start()
      }
      next()
    })
    router.afterEach(() => {
      NProgress.done()
    })
    

源码地址:[email protected]:sunhailiang/vue-public-ui.git

欢迎加微信一起学习:13671593005

未完待续…

你可能感兴趣的:(js,vue,前端项目)