# vue-admin-2208 **Repository Path**: connerljlx_admin/vue-admin-2208 ## Basic Information - **Project Name**: vue-admin-2208 - **Description**: 2208班vue后台管理项目 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-04-10 - **Last Updated**: 2023-04-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 项目运行配置 vue.config.js # 项目启动 过程 和基础封装 + 基础配置 路径别名 开发服务器 + 接口处理 - axios二次封装 - 服务器反向代理 ## 环境变量 环境： 开发 生产 vueCli提供了 环境变量 同一个变量 在不同环境下的值 是不一样的 获取环境 ```js // NODE_ENV 开发 'development' 上线 'production' process.env process.env.NODE_ENV ``` + vueCli自定义环境变量 - 根目录下创建环境变量文件 .env.development .env.production 自定义变量 一定要以 VUE_APP_名 命名 才能拿到这个变量 ``` VUE_APP_BASE_URL=开发的源 ``` ```js process.env.VUE_APP_BASE_URL // 获取 ``` # 开发环境下 接口的反向代理 注意： 前后端分离的接口， 大部分所有的接口 路径 都有一个路径前缀 www.xxx.com/getItemLists ```js devServer: { host: "localhost", port: 3000, open: true, // 接口的反向代理 proxy: { // 所有以 /conner path 开头的请求 '/conner': { // 反向代理源 target: 'https://api.it120.cc', // 是否切换源 changeOrigin: true, // 路径前缀重写 pathRewrite: { '^/conner': '/conner' // 服务器发请求完成路径是 target + 前缀重写后的值 + 请求中去除前缀路径 } }, '/api': { target: '第二个源', changeOrigin: true, pathRewrite: { '^/api': '' } } } } ``` 注意： 1 路径是否重写为空 取决于 真实接口 path 是否有这个前缀 没有 重写为空 2 为什么 要将 路径源 存储在环境变量中 # 安装 vue-chrome-devtools # 路由组件的命名规范 ``` HomePage components index.vue ``` 每个路由组件都要定义name属性 name属性要和 目录名一致 # 解决 .prettier 和 eslint冲突问题 Delete `␍`eslint(prettier/prettier)错误 + eslintrc.js中新增配置 ```js rules: { "prettier/prettier": ["error", { endOfLine: "auto" }], } ``` # vue 组件库 pc端 element-ui (vue2.x) element-plus(vue3.x) 饿了么 [](https://element-plus.gitee.io/zh-CN/guide/quickstart.html) antd-vue 蚂蚁金服 iview 移动端 vant-ui 有赞 nut-ui 京东 native-ui vue2.x技术栈 vue2.x+ vue-router3.x + vuex3.x + element-ui + vueCli vue3.x技术栈 vite + vue3(组合式api) vue-router4.x + pinia + element-plus + ts # 使用element-plus 看文档 [](https://element-plus.gitee.io/zh-CN/guide/design.html) # mock接口 前后端分离开发流程： 提前发布接口文档， 前端和后端 同步进行开发，前端根据 原型图和设计图 开发项目， 前端开发项目 后端接口 还在开发中， 此时 前端如何发送请求? 前端根据接口文档中 每个接口要求（类型，路径、参数、返回数据格式），前端自己 mock接口，开发 axios 请求的自己mock接口 后端接口完成：只需要将 源 从 mock的源 改为 后端的源即可 和后端 对接口 （前后端 接口联调） + 本地mock 本地安装 mockjs 拦截ajax请求 生成随机数据 - 安装 ```js npm i mockjs -D ``` - mock接口 ```js const Mock = require("mockjs"); // 方法mock /* Mock.mock('path'[,type], data) 参数1 mock接口的路径 参数2 请求类型 get/post/put/delete 参数3 返回的 数据 如何生成接口随机数据 量词 修饰 字段名 决定 该字段的长度 或者 大小 "字段|n": 值 固定的长度 或 "字段|n-m": 值 范围的长度 数组 "data|10": [] 返回固定长度为10的数组 "data|10-20": [] 返回数组长度 为 10-20之间 字符串 "str|2": "☆" // "☆☆" "str|2-4": "☆☆" // "☆☆☆☆" 到 "☆☆☆☆☆☆☆☆" 之间 number 修饰大小 一般只定义 范围 不会固定 "num|1-100": 1 自增 一般用于 id的定义 "id|+1": 1 // 自增1 产生随时数 占位符 用于字段值中 必须放到 引号中 字段名: "@占位符" // 加@ 避免冲突 基础占位符 boolean, natural, integer, float, character, string, range, date, time, datetime, now 图片占位符 image, dataImage 颜色 color 字符 paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle 名字 first, last, name, cfirst, clast, cname 网络 url, domain, email, ip, tld 地址 area, region 其他 capitalize, upper, lower, pick, shuffle Miscellaneous guid, id */ Mock.mock("/api/getItemLists", "get", { code: 200, msg: "请求成功", "data|10-20": [ { "id|+1": 1, itemName: "@ctitle", "price|1-1000": 1, onsale: "@boolean", createAt: "@date", desc: "@cparagraph", thumb: "@image('100x100','@color', '牛夫人')", }, ], }); ``` + 线上mock平台 可以真的发出请求， 根据mockjs语法生成随机数据 fastmock [](https://www.fastmock.site/#/login) rap2.taobao.org easymock # webpack中 模块引入 + es module + nodejs 模块化 区别？ 1 import 必须在代码编译之前提前引入，参与代码构建的 2 可以按需引入 定义在源码中 3 require 一般 引入 生产环境不用代码 （醒目，后期看到后手动删除） [](https://modao.cc/community?source=nav&page=1&category=project_basic&plabel=%E7%94%B5%E5%95%86&clabel=%E7%94%B5%E5%95%86%E5%90%8E%E5%8F%B0) [](https://www.axureshop.com/a/b/axure-prototypes/page/2) ## 无限级分类 ```js { id: 1, cateName: '分类1', cateIcon: 'xdfgh', enable: 0, pid: -1 // 当前分类父级分类的id -1 代表当前分类没有父级分类 当前分类是顶层分类 } { id: 59, cateName: '分类n', cateIcon: 'xdfgh', enable: 0, pid: 1 // 当前分类父级分类的id -1 代表当前分类没有父级分类 当前分类是顶层分类 } { id: 1, cateName: 'xx', pid: -1, children: [ { id:'xx', cateName: 'xx', pid: 1 }, { id:'xx', cateName: 'xx', pid: 1, children: [ {} ] } ] } // ? 定义递归函数 实现 无限级分类 ``` # 处理日期的js库 dayjs moment.js # 单向数据流 数据都放到 父组件中管理 props传递给子组件 有些数据 应该在 子组件中直接管理： 1 控制子组件中 元素 显示隐藏 2 子组件是表单 表单绑定的数据 应该在子组件中管理 # 商品分类字段 ``` cateName string cateIcon string 上传成功图片地址 order number 值越大 越靠前 enable 是否隐藏 boolean pid 当前分类 父级分类的id ``` # 组件分类 逻辑组件 处理业务的组件 大部分都是 路由组件 UI组件 逻辑组件 中 使用 公共子组件 逻辑数据全部通过 逻辑组件管理， 通过props传递给ui组件 一下数据除外（UI组件内部控制 某个模块显示隐藏、 UI组件内部有表单，表单绑定的数据） UI组件 不要处理任何 业务 （触发自定义事件 让逻辑组件处理业务） # element-ui/plus 表单校验规则 + 必填校验 ```js { required: true, message: '该字段必填', trigger: 'blur' // 触发时机 } ``` + 常用类型校验 ```js { type: 'number', message: 'xxx' } string number boolean method regexp integer float array object enum date url hex email any ``` + 正则校验 ```js { pattern: /^[a-zA-Z]\w{3,7}$/, message: 'xxsds' } ``` + 自定义校验 validate validator ```js { // rule 现在校验规则是个数组 value 校验时表单的值 校验通过 运行 callback() 校验不通过 callback(new Error('不通过错误提示文案')) validator: (rule, value, callback) => { if (value === '小明'){ callback() } else { callback(new Error('只能输入小明')) } } } ``` + 异步校验 校验 必须通过后端进行校验 是否通过 通过 提交 否则不提交 ```js { asyncValidator: (rule, value) => { // 返回promise then校验通过 catch校验失败 return new Promise((resolve, reject) => { axios.get('xxx').then(res => { if (res.data.code !== 200) { reject('错误提示文案') } else { resolve(); } }) }) } } ``` # css 变量 # Teleport组件 # 富文本编辑器 ueditor 百度开源 wangeditor quill (vue-quill-editor) # 图表插件 echarts highcharts d3.js antv 常用： vue + echarts react + antv echarts 学习步骤 1 快速入门 学习 https://echarts.apache.org/handbook/zh/get-started/ 2 配置项手册 https://echarts.apache.org/zh/option.html#title 3 echarts 交互 （外部元素 控制echarts echarts 控制外部元素） https://echarts.apache.org/zh/api.html#echarts 常用概念： 系列 类目 （常在x轴） x轴 y轴 tooltip 提示框 visualMap 视觉映射 （常用于地图组件） toolbox 工具栏 charts 富文本概念： 常用于 某些 属性 值是文本 需要自定义渲染 举例： 标题 x轴类名（数据名） label（名字） echarts 字符串中使用变量 "{变量名}" 类似于 js中的 `${}`