vue/elementUI
vue/elementUI
老朱.
业余时间喜欢写点技术博客,读点无用之书。想阅读我更多原创的非技术类文章,可以关注我的公众号 老朱的读书随想
展开
-
在vue项目中使用less
less提供了可编程的css,包括以下机制,可以提高css代码的可维护性和可读性定义变量并多次使用mixins(一个样式中包含另一个样式)格式嵌套(可以形成代码块,有利于提高可读性)@import (可以将样式拆分到不同的文件中,形成组件)本篇主要来讨论如何在vue项目中使用less安装依赖包npm install -D less less-loader@7.3.0由于less-loader和webpack版本适配的问题,下面提供更多版本信息@vue/cli的版本$ vue --v原创 2021-08-20 16:30:08 · 28635 阅读 · 0 评论 -
使用webpack来反向代理本地接口
问题场景:在前后端分离的项目中,在开发阶段,前端项目如何调用后端的接口而不用考虑跨域问题。本文将通过webpack的配置来实现。实现方式在根目录下找到(或新建) vue.config.js 文件,内容如下module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', pathRewri原创 2021-08-15 15:58:04 · 751 阅读 · 0 评论 -
使用axios请求http接口
安装npm install axios参考文档:https://axios-http.com/docs/intro配置axiossrc/main.jsimport axios from "axios";import { Message } from 'element-ui';axios.defaults.baseURL = '/api';// axios.defaults.headers.common['Authorization'] = 'AUTH TOKEN';axios.defa原创 2021-08-15 16:14:48 · 980 阅读 · 0 评论 -
Vue的组件之间的交互方式
在Vue中,Component之间的通信方式主要体现在父组件与子组件之间的通信。最简单的形式就是直接的父子节点的通信模型,复杂一些的,就要借助他们的最近父级元素从而转换为父子节点的通信模型。本篇将来简单谈谈vue组件之间交互的方式。父组件主动向子组件交互通过props传递状态父组件通过props来向子组件传递自己的状态,并通过修改这些状态来改变子组件的显示。父组件的template<ChildComponent :parentValue="xxx"></ChildCompone原创 2021-08-15 16:13:08 · 1295 阅读 · 0 评论 -
Breadcrumb组件(Vue + Element UI)
背景element UI提供了el-breadcrumb组件,但只包含样式,如何显示每一个el-breadcrumb-item则需要开发者自己实现。本篇文章给出了一个简单的demo,可以基于vue-router的配置自动生成面包屑导航的所有el-breadcrumb-item。breadcrumb 组件的代码template:<template> <el-breadcrumb> <el-breadcrumb-item v原创 2021-08-15 16:10:39 · 1862 阅读 · 0 评论 -
使用VSCode调试vue
前置条件在VSCode中安装Debugger for Chrome插件实现步骤在vue.config.js中加入configureWebpackmodule.exports = { configureWebpack: { devtool: 'source-map' },}在VSCode中配置 launch.json{ "version": "0.2.0", "configurations": [ { "t原创 2021-08-15 16:23:59 · 4416 阅读 · 1 评论