脚本宝典收集整理的这篇文章主要介绍了

vue 撸后台笔记一

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

前言

本文是以 花裤衩 大佬的 vue-element-admin 项目为模板、结合公司需求开发的后台管理系统的学习笔记。

原项目地址:vue-element-admin
参考文章:手摸手用 vue 撸后台系列

安装与配置

新建 vue-cli 项目,相关安装及配置不多做介绍,有需要可自行搜索。接着是安装项目依赖。

基本依赖库:

  • Vue-Router Vue.js 官方的路由管理器
  • Axios 基于promise 的 HTTP 库
  • Element-UI 为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库
  • Vuex 专为 Vue.js 应用程序开发的状态管理模式

扩展依赖库:

  • node-sass css 扩展语言
  • normalize.css 为默认的 HTML 元素样式上提供跨浏览器的高度一致性
  • js-cookie 轻量级的 js 操作 cookie 的插件
  • i18n Vue.js 的国际化插件,它可以轻松地将一些本地化特性集成到 Vue 中
  • driver.js 轻量级、无需依赖但功能强大的原生 JavaScript,兼容所有主流浏览器,可帮助你将用户的注意力集中在页面上
  • NProgress 细长的全站进度条
  • SVG sprite loader 用于根据导入的 svg 文件自动生成 symbol 标签并插入 html
  • Sortable 轻量级的拖放排序列表的 js 插件
  • ECharts 功能强大的图表和可视化库
  • screenfull 全屏插件
  • mockjs 可以帮助前端独立于后端开发的数据模拟工具
  • xlsx 各种电子表格格式的解析器和编译器

项目结构

├── build                   // 构建相关
├── config                  // 配置相关
├── disk                    // 打包文件
├── node_modules            // 依赖项
├── src                     // 源代码
│   ├── api                 // 所有请求
│   ├── assets              // 主题 字体等静态资源
│   ├── components          // 全局公用组件
│   ├── directive           // 全局指令
│       ├── waves           // 水波纹指令
│   ├── icons               // 项目所有 svg icons
│   ├── lang                // 国际化 language
│   ├── mock                // 项目 mock 模拟数据
│   ├── roter               // 路由
│   ├── store               // 全局 store 管理
│   ├── styles              // 全局样式
│   ├── utils               // 全局公用方法
│   ├── views               // views 所有页面
│       ├── dashboard       // 功能主页
│       ├── errorPage       // 错误页面
│       ├── layout          // 整体布局
│       ├── login           // 登录页面
│       ├── redirect        // 重定向页面
│       ├── statistics      // 数据统计页面
│   ├── App.vue             // 入口页面
│   ├── errorLog.js         // 错误日志
│   ├── main.js             // 入口文件 加载组件 初始化等
│   ├── permission.js       // 权限管理
├── static                  // 第三方不打包资源
├── .babelrc                // babel-loader 配置
├── .eslintrc.js            // eslint 配置项
├── .gitignore              // git 忽略项
├── favicon.ico             // favicon 图标
├── index.html              // html 模板
├── package.json            // 依赖项目录
├── README.MD               // 说明文档

几个主要文件夹与功能模块

api 与 views

根据项目的业务划分 views 页面展示部分,并将 api 接口请求与 views 一一对应,有利于迭代更新与后期维护。

clipboard.pngclipboard.png

components

将全局公用的模块与组件存放在 components 文件夹中,页面级的的组件建议还是放在各自的 views 文件夹下。

clipboard.png

store

在 index 入口文件引入 modules 对象,独立封装各个模块状态。

clipboard.pngclipboard.png

axios

在 axios 配置档设置基础 URL,根据环境变量动态切换 api,需要在 config/dev.env.js 文件中配置接口路径。

vue 撸后台笔记一-脚本宝典
clipboard.png

后端对每次的请求都带上了 token 权限验证,所以我们需要在拦截器中自定义一个头部。

clipboard.png

clipboard.png

在跨域请求中,非简单请求(不是 getpost 或存在 多余的头部 )时,浏览器会首先进行一次 OPTIONS 请求,这个请求来询问跨域是否被允许。 Access-Control-Request-Headers 就属于这个请求。其中的 cookiex 即我们自定义的头部,需在后端加入到 Access-Control-Request-Headers 中。

lang

将中英文语言包各自封装。
clipboard.pngclipboard.png

并在入口 index.js 配置导入。
clipboard.png

main.js 使用 i18n
clipboard.png

总结

以上是脚本宝典为你收集整理的

vue 撸后台笔记一

全部内容,希望文章能够帮你解决

vue 撸后台笔记一

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过