rabc 前端页面搭建记录

vue3.0 + element-plus - sass

环境搭建

安装 vue3.0

    npm install -g @vue/cli

安装 element-plus

element-plus 有提供 vue3 插件

vue add element-plus

部分引入时需要同时引入整体样式 import 'element-plus/lib/theme-chalk/index.css'

安装 sass loader

sass 11+ 会有 this.getOptions is not a function 的错误，因此使用 sass 10+

npm install -D sass-loader@^10 sass

初步设计

基本布局搭建

使用基本的 header - aside - container 布局，顺便做个动态贴底的特效：

  mounted() {
    this.screenHeight = document.documentElement.clientHeight 
    const _this = this
    window.onresize = function () { // 定义窗口大小变更通知事件
      // _this.screenWidth = document.documentElement.clientWidth // 窗口宽度
      _this.screenHeight = document.documentElement.clientHeight // 窗口高度
    }
  }

ps：给 container 设置高度时要减去 header 和页面的 padding：:style="{height:${screenHeight - 75}px}"

引入 vue-router，顺手抽离 menu 组件

    npm i vue-router@next

v3 需要搭配 vue-router 4，更多资讯可以查阅这里

编写网络模块

还是使用普通的 axios

npm install axios -S

随手封装一个 api.js 公用模块处理网络请求，该网络模块应该包括：

1. 提供返回拦截插槽（interceptor），以应对不同后端返回的错误码、返回结果。
2. 可以添加公共的请求参数，并且提供序列化请求参数保证统一（驼峰命名法转下划线或者相反）。
3. 可以开启/关闭允许跨域，是否携带 cookie。

有关是否要引入 vuex

目前很纠结是否要引入 vuex 来进行状态管理，思考中。