weixin_43090018的博客

考虑到不是所有人都会ts，本文中所有的代码都是以js为主1. 环境搭建1. 默认大家都已经搭建好vite及其相关的环境如有疑问可查看官方文档：vite中文官方文档2. 使用命令行快速初始化项目：# npm 6.xnpm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线：npm init vite@latest my-vue-app -- --template vue# yarnyarn create vite m

前序早上刚到公司，打开浏览器准备开始学（摸）习（鱼），看到GitHub来了个通知，vue-cli已经升级至5.0.1的版本了，好奇的点进去看了下官方文档说底层已经使用上webpack5了，看样子还不错（但我还是喜欢vite~~）；node-sass也弃用了更多重大变更请查看官方文档的说明：vue-cli5重大变更说明升级至最新版这还等什么，赶快去体验一下吧首先打开终端执行npm uninstall @vue/cli -g卸载掉4.x的版本（mac版本的需要加上sudo）接着执行.

背景最近用vue3开发完成项目打包的时候，发现有些模块占用的体积很大，通过webpack-bundle-analyzer分析工具我们可以看到打包后@toast-ui/editor整整都快1M了，思索半天决定采用cdn化，减少体积vue版本：3.2.26@toast-ui/editor版本：3.0.21、在vue.config.js配置对应的js、css资源**不要从jsdelivr里面去引入，下面会说为什么**在vue.config.js中configureWebpack选项里.

1、首先官网是这样说明的：vue版本：3.2.26element-plus版本：1.2.0-beta.6然后我在main.js中也这样写了于是乎在项目没生效我只能说官方的文档能不能细心点～～·2、使用ElConfigProvider全局配置组件在app.vue中使用组件<template> <el-config-provider :locale="locale"> <router-view /> </el-config-.

1、在vue2中可以通过this来访问到$refs，vue3中由于没有this所以获取不到了，但是官网中提供了方法来获取知道了怎么获取后，我们结合ElementPlus来使用，因为项目中用到了ElementPlus的表单验证，官网也是醉了，还写的是vue2的写法话不多说，上代码由于我得form表单外面包了一层el-dialog，是不能在onMounted中获取到$refs的，应该在触发对应事件，让dialog绑定的v-model变为true的获取获取 label-position=

使用npm安装完成的依赖打包完成后体积竟然达到了9.7MB，这才只是写了8个页面，所以考虑采用cdn引入1、在vue.config.js中添加cdn配置module.exports = { configureWebpack: { //使用cdn externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios':'axios',

距离vue3出来也是有段时间了，用它做了一个项目，本文简单总结一下使用vue3日常开发遇到的问题，和之前变动还是蛮大的transition组件vue2.x中使用路由的过渡组件直接使用就ok，在vue3的版本中，要使用router-view进行包裹，就像下面这样，不然没效果，控制台也会有警告全局相关3.x的版本中，挂载全局使用globalProperties，详情可以去看官方文档；比如下面我们一个全局的请求地址import { httpUrl } from '@utils/config.js'

有这样一个添加个人信息的form表单，点击确定的时候，在控制台输出他所填写的内容（以react为例）要是按照我刚写代码的时候，肯定是一个输入框一个方法，然后在进行赋值；万一输入框多了那就真tm难受我们可以通过调用一个函数传不同的参数来进行优化函数柯里化的方式import React, { Component } from 'react'export default class Demo extends Component { state = { name: '',

首先去阿里巴巴下载几张svg图片，然后新建iconfont文件夹用来存放svg相关，并新建index.jsindex.js代码// 引入 svg 目录下所有文件const req = require.context('./svg', false, /\.svg$/)const requireAll = requireContext => requireContext.keys().map(requireContext)requireAll(req)然后在components目录下新

vue2.x挂载全局是使用Vue.prototype.$xxxx=xxx的形式来挂载，然后通过this.$xxx来获取挂载到全局的变量或者方法在vue3.x这种方法显然是不行了，vue3中在setup里面我们都获取不到this，官方提供了另一种方法来让我们使用，上代码首先在main.js中写入我们需要挂载的一个变量，比如一个地址吧main.jsimport { createApp } from 'vue'import App from './App'import store from '@s

npm安装一下依赖：npm install vue-amap --save没有key的要去高德控制台里面去申请一个：https://lbs.amap.com这里的使用方法没有像其他文章的那样，先引入，然后再Vue.use(AMap)1、在项目的index.html中引入<script src="https://webapi.amap.com/maps?v=1.4.7&key=你申请的key写在这里&plugin=AMap.CitySearch,AMap.Autocomplete

先来看下效果主要是在点击左侧menu菜单栏的时候加载进度条，并且右上角有一个小loading，当路由切换完成的时候进度条到底，loading小动画和进度条一起消失主要用到的是element-ui中的Progress组件和nprogress，首先在项目中安装nprogress：npm install --save nprogress安装nprogress的npm文档介绍：https://www.npmjs.com/package/nprogress主要通过这两个方法来控制进度条写代码之前先思考

vite和vue3已经出来有段时间了，最近一直忙着没时间搞一下，最近搞了一个还不错安装vite下载模板vite中文文档：https://cn.vitejs.dev/guide/vue3中文文档：https://vue3js.cn/docs/zh/guide/introduction.html通过在vscode中运行以下命令，可以使用 Vite 快速构建 Vue 项目1、安装一下：npm init vite-app 你的项目名字2、进入项目：cd <project-name>3、

vuex主要是vue的状态管理，如果我们在项目中只通过传参、缓存等方式来同步data中的值，一旦项目变得大了页面多并且很复杂的时候就会变得很难维护和管理。vuex就把我们频繁使用的值进行集中管理，可以在整个项目中共同使用state：存储状态（变量）。使用：$sotre.state.xxxgetters：可以理解为state的计算属性。加工state成员给外界。使用：$sotre.getters.functionName()mutations：修改状态，并且是同步的。可以用来修改state中的状态。使

先看一下效果组件wxml代码<!--components/keyboard_number/keyboard_number.wxml--><view class="mk-click" bindtap="onShowKeyboard"></view><view class="keyboard-main-container" catchtouchmove="true" style="pointer-events:{{isShowModal ? 'all':

上效果图其实很简单，只需要知道结束时间，并获取当前时间，然后计算时间差和相差秒数，设置定时器，最后在离开页面清除定时器即可html<view class="daojishi-container"> <view>距离2021年春节还有</view> <view class="time-content"> <view class="item"><view>{{day}}</view>天&lt

**1、首先新建一个文件夹把相关依赖下载完成**1、npm init -y 初始化项目2、npm i -D webpack webpack-cli webpack-dev-server 安装webpack、webpack-cli和serve3、npm i -D babel-loader @babel/core @babel/preset-env 安装babel4、npm i -D vue-loader vue-template-compiler html-w

考虑到项目中上拉加载更多的地方会有很多，所以封装成了组件，由于时间紧张，整体的先做出来了，还有一点问题，就是上拉加载的时候，loading特效和文字没出现，后期有时间改一下**loadMore.vue**<template> <div class="load-more-wrapper" @touchstart="touchStart($event)" @touchend="touchEnd($event)"> <div class="cont

这是最初的页面样子，因为模板文件后期会改变，所以要请求接口下载并填写，没有数据的时候发放按钮是禁用的<template> <div> <a-spin tip="Loading..." :spinning="isLoading"> <section class="upload-police-serach-container"> <div style="display: flex; align-items: cen

1、先来看一下效果，第一个是嵌套表格的，第二张图片是带checkbox的嵌套子表格核心代码（用到的数据提前在data中定义好）点击查看权限后弹出嵌套子表格，也就是第一张图片的样子data() { return { showAuthVisible: false, isVisible: false, visible: false, //是否显示modal isLoading: true, confirmLoading: false

//点击导出 exportData(){ this.isLoading = true if(!this.startTime || !this.endTime){ this.$message.warning("请选择开始和结束时间") } else { console.log(this.startTime,this.endTime) httpUtil.axiosHttp({

用vue脚手架搭建完成一个项目之后，用npm install ant-design-vue --save安装ant design vue**1、layout布局**我用的是layout的布局，安装完成后，在main.js中配置一下官方文档上用一个引入一个，而且还有报错。我就直接全部引入过来了import Vue from 'vue'import App from './App.vue'import router from './router'import store from './sto

页面的大致效果就是这样的：1、点击最上面的框进行全选2、可以对每一行的数据进行单选3、将单选/全选的数据在请求后台接口的时候传给后台这里呢实际上没有用到checkbox，只是用到了element中table组件的一个属性，详情见：带checkbox的table，只需要设type属性为selection即可上代码1、@select-all：点击全选触发的事件，接受2个参数2、@select：点击checkbox触发，接受1个参数 <el-table

现在有个需求，我点击第一层、第二层、第三层都要显示其对应的数据（包括来回点击父子层节点，多次点击）看了很多文章都说获取父级和子级的当前节点啥的，有点麻烦，em…，直接上代码<el-tree :data="companyList" node-key="id" :props="defaultProps" :default-expanded-keys="[0]" :accordion.

登录的功能应该是放在第一篇的，昨天脑子不够用，今天这篇博客来补上，在登录的时候，在vuex对应的文件里面处理好数据store------》index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { userInfo: null, userData: null, refreshMark: null, sear

一定不要忘记加router-view，刚开始就是忘记了没加，老半天没渲染出来

1、安装axios：npm install axios --save-dev2、在和main.js同级的目录中新建一个js文件（httpRequest.js）import axios from 'axios'import qs from 'qs'axios.defaults.timeout = 3000//设置请求响应时间axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset

<template> <view class="content"> <view>输入验证码</view> <view>短信验证码已发送至<text>110110110</text></view> <view v-show="verification" @tap="getCode">获取验证码</view> <view v-show="!verification"&.

先看效果图(稍微丑点…，功能可以就行)当搜索框没有内容的时候下方是不显示的1、html部分 <view style="margin-top: 50rpx;"> <input type="text" v-model="searchText" style="border: 1rpx solid red;width: 90%;margin: 30rpx auto;"/...

1、对tabbar和tabbarItem进行封装2、给tabbarItem中传入动态的icon和text文字3、通过路由动态切换每一个tabbarItem4、动态切换tabbarItem中的图标和文字在components中新建tabbar和tabbarItem组件tabbarItem组件：<template> <div id="tabbar-item" @cli...

vue路由传参方式有很多种，在这里就用query的方式，我觉得这种比较方便好记1、js中里面的name一定要和你router路由中的名字对应起来 toDetail(item){ console.log(item) this.$router.push({ name:'classifyDetail', query:{ c...

swiper坑太多了，话不多说，直接上代码1、去swiper中vue使用方法安装swiper2、我这个是在单页面中引用的，在全局中引用会报许多未知的错，就引在单个vue文件了下载完成后在需要用到的vue页面中 引入js：import Swiper from 'swiper'css：@import '../../../node_modules/swiper/css/swiper.css';...

1、首先安装axios： npm install axios -S2、在根目录下新建一个vue.config.js3、在里面写上需要配置的东西module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: ...

直接上代码html部分：搜索框部分<view class="u1"> <view class="sousuo"> <input type="text" value="" placeholder="请输入关键字搜索" focus="true" v-model="text" @confirm="searchText($event)" /> ...

<div class="to-top" v-if="topImg" @click="toTop"> <img src="../assets/icon_daodingbu@2x.png" alt=""></div>在mouted中监听页面滚动mounted(){ window.addEventListener('scroll', this...

1、安装插件第一个是一种弹性布局方案，第二个插件是px转成rem的插件npm i lib-flexible -Snpm i px2rem-loader -D2、安装完成后在node_modules中查找flexible.js文件,将代码修改为适应PC 端的代码function refreshRem(){ var width = docEl.getBounding...