Vue
学习笔记
mrhaoxiaojun
这个作者很懒,什么都没留下…
展开
-
Vue 简版文件预览笔记
简版文件预览笔记。原创 2023-08-05 14:03:49 · 487 阅读 · 0 评论 -
Vue3.0 在组件外使用 VueI18n 的问题
通常将写在setup里面的代码写在外面会报错意思是必须写在setup里面要将 i18n 与 Vue 3 的组合 API 一起使用,但在组件的 setup() 之外,需要这么写这里是关键写法原创 2022-06-13 21:30:15 · 7945 阅读 · 0 评论 -
vue3 +vite+ts实战项目添加 eslint + prettier + lint-staged 踩坑指南
初始化项目// 创建一个空的 vue3-ts 项目,yarn create vite my-vue-app --template vue-ts// 安装依赖cd my-vue-app && yarn// 默认是没有创建git仓库的,这里我们初始化一下git init这个模板是没有使用配置eslint和prettier的,接下来我们依次安装这些依赖。集成eslint首先我们安装eslintyarn add eslint -D接下来初始化eslint:npx esl原创 2022-05-12 17:53:33 · 8352 阅读 · 1 评论 -
vue3 深度选择器>>> 和 /deep/ 和 ::v-deep 被弃用
在vue2中使用深度选择器可以使用旧版写法:/deep/ a{}>>> a{}在vue3.x中的写法新版写法:.user-center { &:deep(.test) { ... }}如果还用旧的,会提示你[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.看网上说,vue3的深度选择还原创 2022-04-12 23:15:55 · 2395 阅读 · 0 评论 -
vue3 在setup中使用mapState
mapState和computed结合在Vue3版本中使用,广大网友写了很多,这里只做一个实战后的应用笔记,不多赘述创建一个hookhooks/useMapState.tsimport { computed } from "vue"import { mapState, useStore } from "vuex"export default function (state:any) { // 1. 获取实例 $store const store = useStore() /原创 2022-04-10 18:29:06 · 1677 阅读 · 0 评论 -
vue3 使用vite打包的时候,发生了这个错误:‘Form‘ only refers to a type, but is being used as a value here.
vue3+ts开发,在使用 vite 打包的时候,发生了类似这样的类型错误很多:‘Form’ only refers to a type, but is being used as a value here.但是前几次打包还没有问题,忘记了什么操作后出现了现在的问题,后来发现将vue-tsc版本升级到最新版本就可以正常打包了,确实版本也比较低yarn add vue-tsc@next...原创 2022-04-10 18:19:33 · 2696 阅读 · 0 评论 -
vue3 安装使用vue-i18n实时切换语言 不用刷新
我使用的版本"vue": "^3.2.31","vue-i18n": "^9.2.0-beta.34",安装 npm install vue-i18n@next 这样装的最新版的才能在vue3.0使用1、main.tsimport { createApp } from 'vue'import App from './App.vue'import router from './router'import { setupI18n } from '@/locales/setupI18n';c原创 2022-04-10 18:12:48 · 3266 阅读 · 2 评论 -
vue3 使用 ref 的性能警告
问题代码警告<template> <div> <component :is="currentTabComponent"></component> </div></template><script setup>import { ref,shallowRef } from "vue";import TodoList from "./components/TodoList.vue";import原创 2021-12-21 17:45:05 · 2037 阅读 · 0 评论 -
vue3 新用法不需要root标签包裹后动画无效
问题:vue3新用法不需要root标签包裹后动画无效测试:了解vue3的同学都知道对比vue2,在template里面无需再古板的加一个最外层的div标签来进行包裹,然而在vue3实际使用过程中,路由添加了动画后,发现有root标签包裹可以正常进行动画,没有进行包裹的组件动画是无效的...原创 2021-12-18 23:58:42 · 281 阅读 · 0 评论 -
一个简单的Vue导出封装处理
vue文件methods: { // 调用导出,弹出命名对话框 exportData () { this.$MxfileDownLoad({ exportfile: this.$t('m.export'), fileName: this.$t('m.fileName'), confirm: this.$t('m.export'), cancel: this.$t('m.cancel'), handleConfirm: (name, c原创 2021-12-02 18:26:45 · 656 阅读 · 0 评论 -
批量修改文件名之后缀修改
实用小工具直接撸代码,再装一个ts-node 配置一下package.json的 script 运行起来解放前端小白的双手import * as shelljs from "shelljs"shelljs.find("src").filter(file => {file.match(/\.jsx?$/)}).forEach(file => { let newName = (file.repalce(/\.(jsx?)$/, '.t$1')); shelljs.mv(file,n原创 2021-01-11 17:13:01 · 277 阅读 · 0 评论 -
推荐一款vue页面加载时的进度条 npropgress插件
如果我们的程序每次页面切换时,顶部也有一个进度条,那会让用户体验提升很大的。npropgress插件github地址vue项目的每次路由切换时,都加载进度条安装npm install --save nprogress1、引入在路由配置文件中引入,写到路由加载前和加载后的两个钩子函数中import NProgress from 'nprogress';import 'nprogress/nprogress.css';// 进度条配置项这样写NProgress.configure({翻译 2020-09-18 16:39:37 · 1369 阅读 · 0 评论 -
npm run build --report不生成分析图
官网用法用法:vue-cli-service build [options] [entry|pattern]选项: --mode 指定环境模式 (默认值:production) --dest 指定输出目录 (默认值:dist) --modern 面向现代浏览器带自动回退地构建应用 --target app | lib | wc | wc-async (默认值:app) --name 库或 Web Components原创 2020-09-10 18:08:08 · 2999 阅读 · 0 评论 -
vue-cli4.0 配置CDN加速
vue.config.js出于对网站性能的要求,有时候我们不希望一些比较大的第三方库直接打包到最后的bundle中,而会选择在打包的时候忽略他们,并直接使用CDN上面的资源。以下是vue-cli4的相关配置vue.config.jscdn.config.jsmodule.exports = assetsCDN = { useCDN: false, // webpack build externals externals: { vue: 'Vue', 'vue-router原创 2020-09-10 17:58:17 · 1815 阅读 · 2 评论 -
echarts 公共组件封装
组件调用<charts v-if="isShow" class="charts" wrapId="pieWrap" chartsId="pie" :clickCallback="pieCb" :options="pieOpts"></charts>echarts 公共组件封装 charts<template> <div class="echart-wrap" :ref="wrapId" :id="wrapId" > <d原创 2020-09-09 15:22:11 · 1127 阅读 · 0 评论 -
iView 组件库table表格单选按钮列添加
iView 组件库table表格单选按钮列添加 this.tableColumns.push({ title: ' ', width: 50, align: 'center', render: (h, params) => { let id = params.row.ROW_ID; return h('div', [ h('Checkbox', { props: { value: this.curren原创 2020-09-09 14:06:31 · 845 阅读 · 0 评论 -
通过Vue.extend()方法,手写messageBox组件
Vue.extend()实例应用-messageBoxVue.extend(options)用法:使用基础Vue构造器,创建一个‘子类’,参数是一个包含组件选项的对象。注意:data选项必须是一个函数//创建构造器var Profile = Vue.extend({ template:'<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data:function(){ return { firstNam转载 2020-08-27 15:47:50 · 441 阅读 · 0 评论 -
vue-cli4x history模式 部署在子目录,以及服务器端的nginx配置
生产环境打包到子目录module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/test/' : '/', outputDir: 'dist/test', assetsDir: 'static',}路由增加根目录在vue-router配置中增加base属性,声明路由根目录export d...原创 2020-04-08 09:25:02 · 1780 阅读 · 0 评论 -
Vue中v-for循环数组,在方法中splice删除数组元素爬坑
原文:https://blog.csdn.net/qq_43363884/article/details/102910256解决:vue 请指定for循环中key值的唯一性,不要取indexjs本身的原因:先来看下几个概念:// splice:返回从原始数组中删除的项(如果没有任何删除,则返回空数组) // 当指定2个参数时,表示删除 // 当指定3个参数,且第2个参数...原创 2019-12-11 09:41:59 · 4189 阅读 · 0 评论 -
vuex2.0 基本使用(2) --- mutation 和 action
我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1.1, mutation The only way to actually change state in a Vuex store is by committing a mutation, 在vue 中,只有mutation 才能改变state. mutation 类似事件,每一个转载 2017-08-15 16:03:45 · 547 阅读 · 0 评论 -
vue2几种不同组件(页面)间传值的方式
在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值。一、路由传值 在跳转页面的时候,在js代码中的操作如下,在标签中使用标签 this.$router.push({ name: 'routePage', query/params: { routeParams: params } }原创 2017-09-20 18:23:14 · 1874 阅读 · 0 评论 -
Vue2路由动画效果实现
在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值。一、路由传值 在跳转页面的时候,在js代码中的操作如下,在标签中使用标签123456this.$router.push({ name: 'routeP转载 2017-09-20 18:12:40 · 1652 阅读 · 0 评论 -
用axios发送请求,全局拦截请求,获取到错误
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;}, function (err) { if (err && err.response) { switch (err.response.status) { case 400: err.me转载 2017-10-10 17:28:51 · 16855 阅读 · 0 评论 -
vue 验证码倒计时60s
html<span v-show="show" @click="getCode">获取验证码</span><span v-show="!show" class="count">{{count}} s</span>js data(){ return { show: true, count: '', timer: null,原创 2017-10-11 14:27:32 · 582 阅读 · 0 评论 -
keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
原来来自: http://blog.myweb.kim/vue/keep-alive/?utm-source=origin 转发请注明出处。在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要将组件在内存中进行‘持久化’,此时 便可以派上用场了。 可以使被包含的组件状态维持不变,即便是组件切换了,其内的状态依旧维持在内存之中。在下一次显示时,也不会重现渲染。PS: 与 相似,只是一个抽象组转载 2017-10-12 10:24:16 · 3252 阅读 · 0 评论 -
vue-cli webpack全局引入jquery
首先在package.json里加入,dependencies:{ "jquery" : "^2.2.3"}然后 nmp install在webpack.base.conf.js里加入var webpack = require("webpack")在module.exports的最后加入plugins: [ new webpack.optimize.Commo转载 2018-01-15 14:37:53 · 271 阅读 · 0 评论 -
vue-cli创建的项目部署在相对路径,你需要做这些。
原文地址:https://segmentfault.com/a/1190000010354315如果静态文件不是部署在网站根目录下,vue-cli将给你造成巨大的麻烦。你不能直接把build好的文件抛进一个目录。你不能直接在本地打开用vue做好的静态网站。改成相对路径,主要需要做两步。1、修改config => index.js => build => asse转载 2018-01-10 15:36:52 · 656 阅读 · 0 评论 -
Vue2.0 v-for 中 :key 到底有什么用?
Vue2.0 v-for 中 :key 到底有什么用? 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略 。 这句话是什么意思?参考地址:https://www.zhihu.com/question/61064119/answer/187145550其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释ke转载 2018-02-06 10:30:01 · 3066 阅读 · 0 评论 -
手把手带你走进MVVM
剖析Vue实现原理 - 如何实现双向绑定mvvm 本文能帮你做什么?1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定参考地址 (https://github.com/DMQ/mvvm)本文源码地址(https://github.com/mrhaoxiaojun/MVVM.git) 欢迎start特此申明:小编我怀着一颗诚挚的内心,通...原创 2018-07-16 14:03:25 · 410 阅读 · 0 评论 -
一个简版的vue2组件库
参考:仿element使用vue实现自己的UI组件库(https://blog.csdn.net/qq316020201/article/details/87090721)从零开始搭建Vue组件库 VV-UI(https://www.cnblogs.com/tiedaweishao/p/7825997.html)Element源码系列——Vue加载Markdown(https://blog....原创 2019-07-01 10:34:23 · 1107 阅读 · 0 评论 -
vue-cli2x history模式 部署在服务器端的nginx配置 (非根目录)
vue history需要nginx或者其他方式配置一下才可正确访问,否则路由跳转之后刷新一下便会404 具体原因vue-router官网有说明,在此不多说该项目是用的vue-cli2x 最近遇到了新问题,我整个项目被拆分为多个vue站点,这个时候,域名是相同的只是第一级路径是不同的依次来区分重定向到哪个站点,这就需要部署服务的时候做区分,不能再/根目录做nginx配置,应该是/a到a站点,/b...原创 2019-07-16 18:55:25 · 698 阅读 · 0 评论 -
如何在 GitHub Pages 上部署 vue-cli 项目
github deploy如何在 GitHub Pages 上部署 vue-cli 项目需要注意的坑(改成相对路径才可以直接访问生成的静态文件)1、修改config => index.js => build => assetsPublicPath 中的’/‘成为’./’2、在build => util.js 里找到ExtractTextPlugin.extract...原创 2019-07-21 15:14:27 · 1273 阅读 · 0 评论 -
vue-cli2x 增加测试环境
方法一:1、npm cross-env –save-dev2、在package.json文件里面 "scripts": { "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", "build:test": "cross-env NODE_ENV=productio...原创 2019-07-22 14:27:53 · 264 阅读 · 0 评论 -
axios 请求出现options的原因和解决方案
原因: 主要是因为跨域,参考以下文章https://segmentfault.com/q/1010000010159122?sort=createdhttps://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS解决方案,使用qs,参考以下文章代码// axios 配置 axios.defaults.timeou...转载 2019-07-22 18:06:28 · 12713 阅读 · 2 评论 -
Vue中router-link介绍
原文地址:http://router.vuejs.org/zh-cn/api/router-link.html 组件支持用户在具有路由功能的应用中(点击)导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。 比起写死的 会好一些,理由如下:转载 2017-02-25 21:39:25 · 2131 阅读 · 0 评论