关键词：
说明
【Vue 开发实战】学习笔记。
安装依赖
windows 需要安装 cross-env 才能拿到参数
npm i cross-env -D
添加脚本
"serve:no-mock": "cross-env MOCK=none vue-cli-service serve"
添加支持jsx
https://github.com/vuejs/jsx-vue2
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props -D
module.exports =
presets: ["@vue/cli-plugin-babel/preset", "@vue/babel-preset-jsx"],
"plugins": [
["import",
"libraryName": "ant-design-vue",
"libraryDirectory": "es",
"style": true // 会加载 less 文件
]
]
;
配置 vue.config.js
module.exports =
lintOnSave: false,
css:
loaderOptions:
less:
javascriptEnabled: true
,
,
devServer:
proxy:
// '@(/api)': target: 'http://localhost:3000',
'/api':
target: 'http://localhost:8080',
bypass: function (req, res, proxyOptions)
if (req.headers.accept.indexOf('html') !== -1)
console.log('Skipping proxy for browser request.');
return '/index.html';
else if(process.env.MOCK !== "none")
// 将请求url转为文件名
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);
,
,
,
,
新增一个请求的公共方法
里面使用 jsx 的语法
import axios from "axios";
import notification from "ant-design-vue";
function request(options)
return axios(options).then(res =>
return res;
).catch((error) =>
const response: status, statusText = error;
notification.error(
// message: h => (
// <div>
// 请求错误 <span style="color: red">status</span>：options.url
// </div>
// ),
message: h =>
return <div>
请求错误 <span style="color: red">status</span>：options.url
</div>
,
description: statusText
);
return Promise.reject(error);
)
export default request;
在分析页测试不用mock数据
我们使用一个不存在的 api 测试一下 /api/dashboard/chart1
<template>
<div>
<Chart :option="chartOption" style="width: 600px; height: 400px;"/>
</div>
</template>
<script>
import Chart from "@/components/Chart.vue";
import request from "@/utils/request.js";
export default
data()
return
chartOption:
,
components:
Chart
,
mounted()
this.getChartData();
this.interval = setInterval(() =>
this.getChartData();
, 3000);
,
beforeDestroy()
clearInterval(this.interval);
,
methods:
getChartData()
request(
url: "/api/dashboard/chart1",
method: "get",
params:
id: "kaimo313"
).then(response =>
this.chartOption =
title:
text: 'ECharts 入门示例'
,
tooltip: ,
legend:
data: ['销量']
,
xAxis:
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
,
yAxis: ,
series: [
name: '销量',
type: 'bar',
data: response.data
]
)
,
;
</script>
<style></style>
效果如下
启动服务测试一下
npm run serve:no-mock
效果如下：
vue开发实战实战篇#35：如何高效地使用mock数据进行开发(代码片段)
说明【Vue开发实战】学习笔记。效果我们通过mock数据来进行开发，比如下面的图表数据来自我们的mock数据调用接口http://localhost:8080/api/dashboard/chart?id=kaimo313安装依赖npminstall--saveaxios编写mock新建ant-design-vue-pro\\mock\\dashboard_c... 查看详情
vue开发实战实战篇#32：如何使用路由管理用户权限(代码片段)
说明【Vue开发实战】学习笔记。效果访问没有权限的路由跳转到403页面菜单也是根据权限进行展示，比如是user用户没有表单的权限访问auth.js权限校验文件exportfunctiongetCurrentAuthority()return["user"];exportfunctioncheck(authority)cons... 查看详情
vue开发实战实战篇#43：如何做好国际化(代码片段)
说明【Vue开发实战】学习笔记。LocaleProvider国际化为组件内建文案提供统一的国际化支持。https://1x.antdv.com/components/locale-provider-cnApp.vue配置<template><divid="app"><a-locale-provider:locale="local 查看详情
vue开发实战实战篇#31：如何将菜单和路由结合(代码片段)
说明【Vue开发实战】学习笔记。实现效果BasicLayout.vue<template><div:class="[`nav-theme-$navTheme`,`nav-layout-$navLayout`]"><a-layoutid="components-layout-demo-side 查看详情
vue开发实战实战篇#42：如何定制主题及动态切换主题(代码片段)
说明【Vue开发实战】学习笔记。vuecli3配置module.exports=css:loaderOptions:less:modifyVars:'primary-color':'#1DA57A',,javascriptEnabled:true,,我们可以修改一下写法<stylelang="less"src=" 查看详情
vue开发实战实战篇#44：如何高效地构建打包发布(代码片段)
说明【Vue开发实战】学习笔记。生成分析报告我们可以使用下面命令生成npmrunbuild----report执行完成之后就会在打包目录生成一个report.html文件分析报告文件打开这个htmlhttp://127.0.0.1:5500/ant-design-vue-pro/dist/report.html页面如下我们可以... 查看详情
vue开发实战实战篇#41：如何管理系统中使用的图标(代码片段)
说明【Vue开发实战】学习笔记。先在iconfont里新建一个项目然后将需要的图标添加入库：https://www.iconfont.cn/比如我的项目如下：全局注册图标组件https://1x.antdv.com/components/icon-cn/importVuefrom"vue";importAppfrom"./App.vue" 查看详情
vue开发实战实战篇#46：如何做好组件的单元测试(代码片段)
说明【Vue开发实战】学习笔记。配置jest.config.js文件https://v1.test-utils.vuejs.org/zh/installation/#%E7%94%A8-jest-%E6%B5%8B%E8%AF%95%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6module.exports=//preset:"@v 查看详情
〖python数据库开发实战-python与mysql交互篇⑯〗-项目实战-实现用户管理-新增用户功能
订阅Python全栈白宝书-零基础入门篇可报销！白嫖入口-请点击我。推荐他人订阅，可获取扣除平台费用后的35%收益，文末名片加V！说明：该文属于Python全栈白宝书专栏，免费阶段订阅数量4300+，购买任意白宝书体系化专栏可加入T... 查看详情
vue开发实战实战篇#29：如何设计一个高扩展性的路由(代码片段)
说明【Vue开发实战】学习笔记。设计嵌套路由设计嵌套路由跟文件夹匹配添加404路由importNotFoundfrom"../views/404"; path:"*", name:"404", component:NotFound添加nprogress进度条安装nprogressnpminprogress-S使用：https://git 查看详情
vue开发实战生态篇#21：nuxt解决了哪些问题？
说明【Vue开发实战】学习笔记。SPA缺点不利于SEO：可以使用服务端渲染SSR首屏渲染时间长：可以使用预渲染Prerendering预渲染Prerendering适用于静态站点SSR动态渲染配置繁琐Nuxt静态站点动态渲染简化配置https://v3.nuxtjs.org/其实... 查看详情
vue开发实战生态篇#22：nuxt核心原理是什么？
说明【Vue开发实战】学习笔记。SSRvue项目是通过虚拟DOM来挂载到html的，所以对spa项目，爬虫才会只看到初始结构。虚拟DOM，最终要通过一定的方法将其转换为真实DOM。虚拟DOM也就是JS对象，整个服务端的渲染流程... 查看详情
vue开发实战基础篇#13：如何优雅地获取跨层级组件实例（拒绝递归）(代码片段)
说明【Vue开发实战】学习笔记。ref引用信息递归查找代码繁琐.性能低效callbackref主动通知(setXxxRef)主动获取(getXxxRef)比如E节点更新就通知A组件，A组件进行ref的缓存即可组件A<template><divclass="border"><h1>A结... 查看详情
vue开发实战学习笔记48篇（完结）
说明【Vue开发实战】学习笔记。学习笔记代码仓库：https://github.com/kaimo313/vue-development-practice目录【Vue开发实战】基础篇#1：第一个Vue程序【Vue开发实战】基础篇#2：组件基础及组件注册【Vue开发实战】基础篇#3：Vue... 查看详情
vue开发实战实战篇#34：如何在组件中使用echartsantv等其他第三方库(代码片段)
说明【Vue开发实战】学习笔记。效果这里我们使用echarts为例在项目里面添加echarts库安装依赖npmiechartsresize-detectorChart.vue<template><divref="chartDom"></div></template><script>import*asechartsf 查看详情
vue开发实战生态篇#16：如何在vue中使用vuex(代码片段)
说明【Vue开发实战】学习笔记。新建工程vuecreatevuex-demo安装依赖进入vuex-demo文件夹，安装vuexnpmivuex@3.1.0修改main.jsimportVuefrom'vue'importVuexfrom'vuex'importAppfrom'./App.vue'Vue.use(Vuex)Vue. 查看详情
vue开发实战基础篇#8：如何触发组件的更新(代码片段)
说明【Vue开发实战】学习笔记。数据驱动数据来源（单向的）状态dataVS属性props状态是组件自身的数据属性是来自父组件的数据状态的改变未必会触发更新属性的改变未必会触发更新例子：index.vue代码<template><di... 查看详情
vue开发实战基础篇#3：vue组件的核心概念：事件(代码片段)
说明【Vue开发实战】学习笔记。事件vue提供了一个简单的方式进行绑定事件，就是使用@xxx就可以进行事件绑定，这里以click事件为例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><meta... 查看详情