ant vue pro

在main.js中
import “ant-design-vue/dist/antd.less”;

在 vue.config.js中
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
};
在 bable.config.js中
“style”: true

在路由中使用 大组件 {render:h => h(“router-view”) }
可免写一个组件

切换路由加载动画效果 Nprogress 网页加载进度条

app主页 布局页和登录页区分开 布局页容纳所有内容页

delete newItem.children; // 直接删除某一节点数据

// 模板语法两个动态class 模板里面是 路由而来的计算属性

动态绑定按钮class
:class="{ check: isChecked }"

navLayout() {
return this.KaTeX parse error: Expected 'EOF', got '}' at position 38: …|| "left"; }̲ // 将单选组合 挂载到 路…router.push({ query: { …this.KaTeX parse error: Expected 'EOF', got '}' at position 28: … [type]: value }̲ }); // 将单选组合 除…route.query.navTheme || ‘dark’"
@change=“e => handleSettingChange(‘navTheme’, e.target.value)”
>

// 对象添加属性直接this.openKeysMap[item.path] = parentKeys;
// 数组添加才push

抽屉


<div class=“handle” @click=“visible = !visible”>

.handle {
position: absolute;
top: 240px;
right: 300px;
width: 48px;
height: 48px;
background: #1890ff;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 48px;
border-radius: 3px 0 0 3px;
}

parentNode 属性可返回某节点的父节点。
removeChild() 方法删除子节点。

如果成功该函数返回被删除的节点，如果失败则返回 NULL。

视频中由于 图表 拉长到屏幕外面 所以使用了 resize-detector 插件 中的 监听和移除监听两个事件
宽度适应

// 新的自适应方法
window.onresize = function(){
// console.log(‘window.onresize…’)
// 调用echarts实例对象的resize方法
mCharts.resize()
}
// window.onresize = mCharts.resize

旧方法
由于 现版本无此问题 所以 无需 使用此插件 还是需要的
import debounce from “lodash/debounce”;
import { addListener, removeListener } from “resize-detector”;
export default {
props: {
option: {
type: Object,
default: () => {}
}
},
watch: {
option(val) {
this.chart.setOption(val);
}
// 上面无法深度监听到某个值的变化
// option: {
// handler(val) {
// this.chart.setOption(val);
// },
// deep: true
// }
// 这样非常耗性能
/* this.chartOption = { …this.chartOption }
我们采用 每三次调用时 手动 重赋值触发上上面不耗性能的监听方式*/
},
created() {
this.resize = debounce(this.resize, 300);
},
mounted() {
this.renderChart();
addListener(this.KaTeX parse error: Expected 'EOF', got '}' at position 32: …his.resize); }̲, // 这里的组件销毁时…refs.chartDom, this.resize);
// 移除监听
this.chart.dispose();
this.chart = null;
// 并销毁 chart
},
methods: {
resize() {
// console.log(“resize”);
this.chart.resize();
// 监听 选中节点宽度变化 会自动调用这里
},
renderChart() {
// 基于准备好的dom，初始化echarts实例
this.chart = echarts.init(this.$refs.chartDom);
this.chart.setOption(this.option);
}
}
};

mounted() {
this.interval = setInterval(() => {// 每三秒调用一次
this.chartOption.series[0].data = this.chartOption.series[0].data.map(
() => random(100) //import random from “lodash/random”;随机数100以内
);
beforeDestroy() {
clearInterval(this.interval);
}// 停止调用

关于在node webpack 中 灵活使用 mock的 .js文件 webpack 配置 devServer.proxy
详情vue cli文档 更详情 webpack 文档

不使用mock的mock
// 某处
import axios from ‘axios’
axios
.get("/api/dashboard/chart", { params: { ID: 12345 } })
.then(response =>response.data

// 在根目录/mock/dashboard_chart.js中
function chart(method) {
let res = null;
switch (method) {
case “GET”:
res = [20, 40, 78, 10, 30, 48];
break;
default:
res = null;
}
return res;
}

module.exports = chart;

// 在根目录/vue.config.js中
module.exports = {
devServer: {
proxy: {
“/api”: {
target: “http://localhost:8080”,
bypass: function(req, res) {
if (req.headers.accept.indexOf(“html”) !== -1) {
console.log(“ddd”);
return “/index.html”;
} else {
const name = req.path
.split("/api/")[1]
.split("/")
.join("_");
const mock = require(./mock/${name});
const result = mock(req.method);
delete require.cache[require.resolve(./mock/${name})];
return res.send(result);
}
}
}
}
}
};
// 随后 .get("/api/dashboard/chart"会自动拆解为 dashboard_chart文件名并访问
// 之后只需在 根目录/mock/下创建 不同.js文件即可 文件名等于请求路径名

// form input上的 v-decorator指令源代码其实什么也没做只是给我们提供了一个标志位
// 这个标志位也就是说 渲染form-item的时候 他会去查找我们的子组件 有v-decorator标志的组件
// 进行劫持 然后去把他的数据 value 由我们自己form-item里面的一个方法来控制它
// v-decorator仅仅是做了一个标志的意思

Object.assign(this, values);
// 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

// 在package.json复制一个命令
“serve”: “vue-cli-service serve”,
“serve:no-mock”: “cross-env MOCK=none vue-cli-service serve”

// linux 和mac环境下不用配置插件 前面不用写 cross-env
// windows 需要安装 cross-env --save

// 在vue.config.js中 直接第一行
if (process.env.MOCK === “none”) {
console.log(process.env.MOCK);
}

// none 是字符串 不等于none 才执行 打印
// 此时 启动时 就要启动新的命令 serve:no-mock
// 终端会打印 none

// 此时 启动时老命令 serve
// 终端不会打印 process.env.MOCK 的值为 undefined
// 暂时只发现在 vue.config.js 中 才能获取

// calc(100% - 10px) css计算属性

// antd 定制主题是专业设计的实际上就是去官网复制下面这段less变量

      modifyVars: {
        'primary-color': '#1DA57A',
        'link-color': '#1DA57A',
        'border-radius-base': '2px',
      }

// 在vue.config.js中
// 原本是
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
// 修改为
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
“primary-color”: “#1DA57A”
},
javascriptEnabled: true
}
}
}
}

// 深度选择器的真正用法
选中页面某个元素 取得class
.ant-menu-dark .ant-menu-item-selected

该元素的 ant组件 比如 组件加
class=“components-layout-demo-side”

必须先选中组件class再用深度选择器 选中元素方能生效
.components-layout-demo-side >>> .ant-menu-dark .ant-menu-item-selected {
color: #000;
}

空格 无法取代 >>>
直接选取子元素为无效操作
选中 class 为无效操作
color: red !important;亦为无效操作
// less sass 无法识别 可用/deep/替代
// 或者再建立 直接写在

// antd 社区 提供的 主题插件
npm install -D antd-theme-webpack-plugin

// 直接 粘贴 到 vue.config.js 第一行
const path = require(“path”);
const AntDesignThemePlugin = require(“antd-theme-webpack-plugin”);

const options = {
antDir: path.join(__dirname, “./node_modules/antd-design-vue”),
stylesDir: path.join(__dirname, “./src”),
varFile: path.join(
__dirname,
“./node_modules/antd-design-vue/lib/style/themes/default.less”
), // less 变量
themeVariables: ["@primary-color"],
generateOnce: false
};
const themePlugin = new AntDesignThemePlugin(options);
module.exports = {
configureWebpack: {
plugins: [themePlugin]
}}

// 在 public/index.html body中

// 让写死的变量变成活的 在.less中
@import “~antd-design-vue/lib/style/themes/default.less”;

.setting-drawer-handle {
position: absolute;
top: 240px;
right: 300px;
width: 48px;
height: 48px;
background: @primar-color;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 48px;
border-radius: 3px 0 0 3px;
}
// 在.vue

// 在浏览器控制台
window.less.modifyVars({"@primary-color":“red”})
可修改主题色为红色 此处并没有如视频中生效

// 语言
Vue.use(LocaleProvider);

.get 不写就是 默认 get请求 post和put请求 必传 data 所以省略了 而get可以没有 {params:{请求体}} 所以 必须写params标识一下 至于delete 只需id没啥好说的 个人理解