我要当上海王/Vue
# 目录结构 ```bash ├── build # 构建相关 ├── mock # 项目mock 模拟数据 ├── plop-templates # 基本模板 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src # 源代码 │ ├── api # 所有请求 │ ├── assets # 主题 字体等静态资源 │ ├── components # 全局公用组件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 项目所有 svg icons │ ├── lang # 国际化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局样式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有页面 │ ├── App.vue # 入口页面 │ ├── main.js # 入口文件 加载组件 初始化等 │ └── permission.js # 权限管理 ├── tests # 测试 ├── .env.xxx # 环境变量配置 ├── .eslintrc.js # eslint 配置项 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自动化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json ``` # 文件结构
项目注意点:
GIt项目评估方式
1.项目名 2.mitlicense开源? 授权协议, start 3.最近更新的时间: 不可超过几个月(技术迭代) 4.有无完整文档 documention!!!!! 5.有无在线Demo
本地存储
---存储容量受限localStoragesessionStorage ---无限大小存储 IndexedDBWebSQL
插件
1.Prettier插件对应的配置不生效
解决方法：
配置 .prettierrc文件是对Prettier额外的配置！ 若不生效的话：需要在vscode的setting.json中配置下 "editor.formatOnSave": true
封装的形式
组件间通信方式
1.类型:父子,非父子,子孙 2.方式: 注意: 总线不会在项目中使用! 交互多!
scope样式
1.style中的scoped
<img alt="image-20211023230813702">
解决方法
1）/deep/是在样式类型为css中应用 2）::v-deep是在scss是应用 <img alt="image-20211023230927699">：
路由
1.路由注册的顺序会影响显示的顺序
在sideBar中会对route进行顺序遍历！进行顺序渲染
2.params && query
//params:设置params: 在路由规则中定义/xx/:id传递params: 在链接中<router-link to='/xx/1'>..|| push('/xx/2') || push('/xx',{params:{id:2}})接收params: 路由跳转到的组件内部this.$router.params / 若路由规则中配置了props,在组件内部可以直接使用 props:[] 接收 //query:传递/设置query: 在链接中<router-link to='/xx/?a=1&b=1'>.. || push('/xx/?a=1&&b=2') || push('/xx',{querry:{a:1, b:2}})接收query: 路由跳转的组件内部this.$router.query / 若路由规则中配置了props,在组件内部可以直接使用 props:[] 接收
接口api
1.如果配置了代理服务器！且配置了路径前缀的话！则发请求前一定要检查是否加了前缀！！否则404！
//请求地址： "/admin/product/fileUpload"
<img alt="image-20211023233238717">:
vue.config.js：配置了代理
proxy: { '/dev-api': {target: 'http://39.98.123.211/', changeOrigin: true, pathRewrite: { '^/dev-api': '' } } }
解决方法：前缀加上！ （前缀与对应的代理设置的需要一致，否则还会404） //请求地址： "/dev-api/admin/product/fileUpload"
跨域存在的问题
无法操作本地存储 无法访问对响应回来的数据 无法操作DOM对象区分框架 类库 插件 功能
### 1.框架: 具有自己的设计思想!
JQuery框架: 操作DOM可以链式操作! 简化代码, 优化性能。所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗 Vue/React框架: 虚拟DOM, 提高浏览器的渲染速度
什么是虚拟DOM?
虚拟DOM的本质是一个和真实DOM结构类似的JS对象
为什么要用虚拟DOM?
虚拟DOM可以提高浏览器的渲染速度。对比操作JS对象，操作真实的DOM消耗的性能较多，频繁的操作DOM时，优势彰显的更为明显。
虚拟DOM的实现步骤？
1、在页面首次渲染时，将要渲染的数据全部加载到虚拟DOM中，而后在一次性渲染到真实DOM上 2、在数据变化时，额外的生成一颗虚拟DOM树 3、通过Diff算法对比修改的部分，而后将修改部分渲染到真实的DOM中 4、释放内存2.插件: 依托于框架主体
3.类库: 独立的函数集 momentlodashday.js underscore
4.功能: 使用框架,插件,调用类库实现的功能
权限
1.当刷新页面时 main.js中引入了permission.js文件！ 该文件主要设置了全局前置和全局后置*全局前置的主要工作1.设置动态的页头2.判断用户是否已经登陆2.1若已经登陆①再点击去login就打回主页②去别的路径时需要检查用户名是否存在-存在就直接next放行-不存在就去dispatch获取用户信息！ getUserinfo！此时就会得到该用户的权限信息！（按钮，路由权限）若获取用户信息出现异常：则token失效了！ 此时删除token，重置state数据，打回login重新登陆并设置登陆后重定向要to的path2.2若没有登陆检查to的path是否在白名单中存在！若存在直接next放行若不存在打回login并设置登陆后重定向要to的path*后置路由的主要工作1.将所有的进度条都done结束掉
Echart
1.在使用插槽时，需要注意要给外包围元素都设置width！ 否则无法显示图标！
2.在LinChat折线图表中！ 若不需要 圆圈拐点可以在series配置项中设置itemStyle配置项
series: { type: 'line', data: [7, 4, 1, 5, 8, 3, 4, 6, 5, 6, 7, 8, 9, 9, 4, 4, 2], smooth: true, //将折现变得平滑 itemStyle: {opacity: 0 //将拐点的透明度设置为0 就可以隐藏拐点圆圈 } }
3.若是想让图表显示得更贴近边缘的话可以设置grid属性
grid: { top: 0, right: 0, left: 0, bottom: 0 }
4.若想要柱形图是横向的话 : 只需将xAxis的type作为value！ yAxis的type作为category就可以反转过来了
let options = { xAxis: { type: 'value', min: 0, //设置type为value这一轴上的最小值 max: 100, //设置type为value这一轴上的最大值！ 会对下面series中的data有影响！ show: false }, yAxis: { type: 'category', boundaryGap: false, show: false }, series: { type: 'bar', data: [78], barWidth: 15 }, grid: { top: 0, right: 0, left: 0, bottom: 0 } };
5.若需要刻度线与标签对齐时可以在轴内部使用axisTick属性的alignWithLabel属性
xAxis: { boundaryGap: true, // 该axisTick需要开启boundaryGap：true的时候才会生效 axisTick: { alignWithLabel: true }, ...}
6.若在柱线图上需要鼠标移入提示可以使用tooltip组件
tooltip: { trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 axisPointer: { type: 'shadow' } }
7.关于mock 1.需要在mock文件下创建一个home.js --> 用于返回数据
----------------------------------------- const data = require('./data.json') //暴露时页需要使用commonjs的暴露语法 module.exports = [ { url: '/home/list', type: 'get', response: () => { return { code: 2000, data } } } ]
2.需要 配置二次分装的mock请求
import request from '@/utils/requestMock' export function reqGetHomeList() { return request({ //往mock的地址发送请求 url: '/home/list', method: 'GET' }) }
相关知识
海贼之最强海王类
海王球、海王丸：仙人掌科裸萼球属多肉植物
vue如何阻塞周期执行
vue
vue如何修剪视频
vue如何实现物流跟踪
仙人球界的“仙女”—美花海王，美如牡丹，皮实好养，开花也勤奋
喜欢仙人球，就养“海王丸”，花美如牡丹，皮实好养，开花也勤奋
基于java jsp ssm vue网上鲜花店网站设计实现vue
vue dialog样式
网址: 我要当上海王/Vue https://m.huajiangbk.com/newsview839386.html
| 上一篇: 用AI一键换商品背景，电商运营从 |
下一篇: AI数字人生意经：定制普遍宣称没 |
