Vue
文章平均质量分 63
包含Vue学习笔记和经验总结。
acgCode
这个作者很懒,什么都没留下…
展开
-
element-plus主题配置
element-plus主题配置先上官网:主题本篇文章会讲述,我是如何根据官方教程进行element-plus的主题配置的,以及遇到的坑,和坑的解决方法。首先,我们需要创建自己的主题文件,/src/styles/element.scss(文件名随意)根据官网,调整我们的主题:@forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: ( 'primary': ('base': #3A9BFF) ),原创 2022-03-16 17:56:18 · 8310 阅读 · 1 评论 -
unplugin-auto-import的配置和eslint报错解决
unplugin-auto-import的配置和eslint报错解决先上官网:unplugin-auto-importunplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个第三方插件的自动导入,也支持自定义插件的自动导入,是一个功能强大的typescript支持工具。unplugin-auto-import常用的配置如下:AutoImport({ // 目标文件 include: [ /\.[tj]sx?$/, // .ts, .原创 2022-03-14 17:14:37 · 21752 阅读 · 17 评论 -
typescript + vite 项目如何配置别名
我们为了省略冗长的路径,经常喜欢配置路径别名。但是在typescript下会遇到一些坑,比如导入路径不能以“.ts”扩展名结束,路径不识别等。下面我记录了我的处理方法。vite.config.js:export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, 'src') // 配置别名 } }})配置完之后,就可以在ide中使用别名了。但是这个时候我发现,路径下面报原创 2022-02-18 18:28:07 · 6527 阅读 · 0 评论 -
从零开始搭建基于vite的vue项目
从零开始搭建基于vite的react项目用vite创建react项目创建项目结构项目的环境配置用vite创建react项目这里我们默认已经安装好了vite环境,如有疑问,可以参考官网的安装流程。打开cmd,将目录指向你的代码仓库,然后输入一下命令。# npm 6.xnpm init vite@latest my-react-app --template react# npm 7+, 需要额外的双横线:npm init vite@latest my-react-app -- --templat原创 2021-11-08 18:16:10 · 3720 阅读 · 0 评论 -
element-plus的自动导入和按需导入
element-plus根据官网文档,推荐用户采用按需导入的方式进行导入。我的项目是使用vite进行构建的,根据官网的文档,利用unplugin-vue-components插件进行自动按需导入。当我们使用element的标签时,无需再使用import对组件进行导入。例如:<el-button>test</el-button>会自动引入ElButton组件。不过当我们想要使用命令的方式创建element组件时,样式会无法自动引入。我们以ElMessage为例。im原创 2021-11-02 15:15:45 · 15792 阅读 · 11 评论 -
vue-route基于动态加载路由配置的权限管理
vue-route基于动态加载路由配置的权限管理清空原路由配置格式化后台路由配置添加路由配置刷新处理在路由权限管理的开发过程中,基于不将用户的配置信息保留在前端的考虑,我着重研究了关于路由配置的动态加载方法。记录如下:这里我从后端获取的路由配置如下:routes:[ { path: "/home", name: "home", componentPath: "views/Home", children: [ { path: "/homeChild", name:原创 2021-07-20 10:11:42 · 312 阅读 · 1 评论 -
解决 Element-UI 动态生成多个radio单选框时数据绑定失效问题
开发需求制作调查问卷,问题为单选题。因此答案的数据绑定需要动态处理。<el-radio-group v-model="answers[index]"> <el-radio>...</el-radio></el-radio-group>data(){ return{ answers:{} }}methods:{ init: function(){ for(const key in questions){ this.answer原创 2021-02-07 13:54:53 · 2735 阅读 · 0 评论 -
Vue下载数据流文件
主要使用的插件是axios,将属性responseType设置为blob。数据流处理代码如下:const { data } = responcelet url = new Blob([data], { type: data.type}if (window.navigator && window.navigator.msSaveBlob) { try { window.navigator.msSaveBlob(url, 'fileName') } catch (e) {原创 2020-08-14 10:57:43 · 469 阅读 · 0 评论 -
Vue自定义组件数据的双向绑定方法
目录Vue父子组件数据的双向绑定使用方法v-model.syncObjectVue父子组件数据的双向绑定使用方法最近在学习饿了么的Vue项目制作的课件,课件内容给了我很大的启发。在开发过程中,数据的单一性可以让功能更加的安全。之前对Vue的学习,更多的停留在父子单向数据绑定,当子组件数据变化时,无法直接影响到父组件。经过这段时间的学习,慢慢找到了一些数据双向绑定的方法,稍微做了一下总结。v-...原创 2019-11-29 16:09:20 · 413 阅读 · 0 评论 -
Vue3.0+前端项目rem适配
准备的工具首先需要准备两个vue插件,amfe-flexible和postcss-pxtorem。引入方式如下:npm i amfe-flexible -Snpm i postcss-pxtorem -D配置工具在main.js文件引入amfe-flexible:import 'amfe-flexible'在package.json进行如下配置:{ "postcss": {...原创 2020-04-09 13:11:52 · 444 阅读 · 0 评论 -
Vue中第三方动画库animate.css的使用
Vue中animate.css的使用安装引入使用基本使用方法自定义播放属性通过Javascript动态添加动画附录动画库常用属性类名(会持续更新)延迟播放播放速度安装通过npm安装:$ npm install animate.css --save或者通过yarn安装:$ yarn add animate.css引入在main.js文件中引入animate.cssimport '...原创 2020-04-14 14:59:37 · 1141 阅读 · 0 评论