ElementUi 笔记

项目基本架构

vue-element-admin

• 作为参考的项目
• 不适合继续二次开发,不会的功能可以参考

vue-admin-template

• 简化版,适合继续二次开发

• 步骤

  • 1.下载项目(到码云克隆)

  • 2.安装依赖

    • 失败的原因是网络不好

      • 解决方案

        • 1.使用taobao镜像
        • 2.修改host,可以更快的链接GitHub

  • 3.改成自己的项目

    • 1.删除.git文件
    • 2.修改package.json
    • 3.修改项目名为自己的项目名
    • 4.用git重新初始化
    • 5.重新推送到远程

项目整体目录

• scr

  • 是开发目录

• 非src的其他文件

  • 子主题 1
    图1.png

运行机制

• 项目如何运行

  • 1.入口文件(main.js)

    • 图(2)
      图2.png

    • 会寻找public下的index.html中id为app的div

• 运行加载顺序

  • 1.router/index.js

  • 图(3)
    图3.png

  • 图(4)
    图4.png

style

• scss

  • 1.sass,scss,less,css的区别

    • 1.less, sass,scss都是css预处理语言，它们的语法功能比css更强大。

    • 2.基本使用流程是：开发时用预处理语言，在打包上线时，用相关工具给转成css给浏览器使用.

      • 1.后缀名：SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss
      • 2.语法规范：sass有严格的缩进规范并且没有{}和;而scss则和css的规范是一致的，我们在实际开发过程中，scss是常用写法

  • 2.变量

    • 图5
      图5.png

• 3.嵌套语法

  • 图5
    图5.png

• 4.&父选择器

  • 图6!
    图6.png

• 5.模块

  • 1.多个.scss文件可以相互引用。在一个.scss文件(base.scss)定义多个变量，然后在另一个.scss（test.scss）中引入这个文件，就可以使用其中定义的变量了
  • 2.格式 @import './xxxx.scss';

axios请求

• 如何实现axios的统一封装处理

  • 1.create创建新的axios实例

  • 1.请求拦截器

    • 图7
      图7.png

• 2.响应拦截器

  • 图8
    图8.png

• 3.重置代码

  • 图9
    图9.png

移除mock功能

• 1.mock使用场景

  • mock：假的

前端程序员提到的mock数据的含义是：真的假数据

• 真的：符合接口规范要求的。
• 假数据：数据是人为创建出来的，不是真正的业务数据。

• 2.什么时候需要mock

  • 后端接口的开发速度跟不上前端的进度， 而前端要实现业务还必须依赖数据，前端为了保证开发进度就需要自己mock数据 ，保证业务能正常开发

• 3.mock的方式

  • 本地启mock服务器：

• 自己用express写接口

• 本地用专门的mock服务

• 4.移除mock

  • 由于我们本项目中不需要用到模拟数据，所以将mock部分删除掉。具体做法有两步：

    • 1.注释掉mock数据的代码

      • （1）main.js中注释mock部分的功能
      • （2）vue.config.js中注释掉before: require('./mock/mock-server.js')

    • 2.删除src/mock文件夹

处理公共资源图片和样式

• 1.处理图片资源

  • 图片资源在课程资料的图片文件中，我们只需要将common文件夹拷贝放置到 assets目录即可,assets目录下的图片不会经过打包的过程 直接产出

• 2.处理样式资源

  • 样式资源在 项目资源/样式 目录下，复制过来覆盖即可：

• 替换variables.scss

• 新增common.scss

我们提供了 一份公共的common.scss样式，里面内置了一部分内容的样式，在开发期间可以帮助我们快速的实现页面样式和布局

将两个文件放置到styles目录下，然后在index.scss中引入该样式
@import './common.scss'; //引入common.scss样式表

理解环境变量的配置

• 1.不同的环境可以设置不同的变量
  开发环境 - > development的文件 生产上线 -> production的文件
• 2.key = value 定义环境变量 process.env.环境变量名字