hql1024的博客

第一步 安装px转rem的插件npm i lib-flexible postcss-px2rem --s在根目录添加postcss.config.js文件module.exports = { plugins: { autoprefixer: {}, "postcss-px2rem": { remUnit: 75, // 设计图为750 * height remPrecision: 2 // rem的小数点后位数 } }};在main.js添加imp

父传子parone和partwo是传给子组件页面的参数 <tabbar v-bind:parone="value1" :partwo="value2"></tabbar>import tabbar from "../components/tabbar.vue"; components: { tabbar: tabbar },...

<template> <div class="box"> <div class="block"> <div class="shop" v-for="(item,index) in orderData" :key="index"> <div class="line"> <d...

先下载node.js 去官网下载npm installnpm install vue-cli -g （然后输入这行）1、npm uninstall vue-cli -g （卸载）2、npm uninstall webpack (卸载webpack)3、cnpm -v4、cnpm install webpack -g() (创建项目前安装webpack)5、vue init web...

<view class="content"> <view class="left"> <block wx:for="{{note}}" wx:for-item="item" wx:key="index"> <view class="item" wx:if="{{index%2==0}}"> ...

Vue引入sign-canvas实现签名画板

Vue3存储库pinia

Vue使用Echarts绘画地图可视化

效果图完整代码↓ <div class="container" id="canvasTop"> <div class="award_box"> <div class="award" v-if="showPrize"> <div class="title"> 奖品名称 </div> </div> <

运行了 npm uninstall @vue/cli -g没用，电脑还是有解决办法：1.查找npm config ls -l找到该文件夹，删除该文件2.删vue原始文件cmd输入where vue,删除这两个文件3.再次检查4.再次安装npm install-g @vue/cli 安装完在看下，可以了5.现在就可以创建vue2或者vue3的项目了vue create vueDemo...

官网：https://github.com/yaminncco/vue-sidebar-menu官网进不去进这里：https://www.vue365.cn/vue-sidebar-menu/演示：https://www.vue365.cn/code_demo.php?id=410Vue2 # Yarn $ yarn add vue-sidebar-menu # NPM $ npm install vue-sidebar-menu --saveVue3 $ npm i vue-.

<template> <div class="home"> <audio @canplay="getDuration" @timeupdate="updateTime" @durationchange='shichang' controls autoplay="autoplay" id="player" :src="audiourl" hidden=true> </audio> <div class="music.

1.点击事件开启 // 点击连接websock connectWebsocket () { if ('WebSocket' in window) { this.websocketWaiting = true //防抖 const socketUrl = `${WS_BASE_HOST}/api/ws/required_data/balance?token=${ this.$store.state.user.access_token

在vue.config.js文件配置module.exports = { devServer: { // 设置代理 proxy: { "/api": { target: "请求域名", ws: true, changOrigin: true, pathRewrite: { "^

var array = [ { name: "aa", }, { name: "bb", }, { name: "cc", }, { name: "dd", }, { name: "ee", }, ]; var line = array.map((item) => item.nam...

<template> <div class="box"> <div class="demo" @click="go">{{testMsg}}</div> </div></template><script>import { reactive, toRefs, onMounted, onActivated } from "vue";export default { setup() { con

生命周期1、beforeCreate -> 使用 setup()2、created -> 使用 setup() 3、beforeMount -> onBeforeMount4、mounted -> onMounted //在渲染完html后执行5、beforeUpdate -> onBeforeUpdate6、updated -> onUpdated //第二次进入页面执行7、beforeDestroy -> onBeforeUnmount

var listgr = Object.assign(this.data.listgr, arrygr);

在Vue项目中安装Vuexnpm install vuex --save在src目录下新建个store文件夹，里面新建index.js在index.js文件夹中创建Vuex实例源代码import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { name: "马鞍山", count: 1 }, getters: { d

1.Nuxt搭建服务端渲染SSR应用2.Nuxt使用axios请求后端数据3.Nuxt generate发布到服务器报错问题4.Nuxt配置全局路由守卫

构建命令npm init vite-app <project-name>cd <project-name>npm installnpm run dev打包上线先在文件夹根目录创建vite.config.js文件写入module.exports = { base: './'};执行npm run build

<template> <div class="title"> <div class="press"> <!-- <div class="animate__animated animate__fadeInRightBig">哈哈哈</div> --> <div class="pressMum"> {{leftNum}} </div> &l.

一、js1.DOM操作——怎样添加、移除、移动、复制、创建和查找节点（1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点（2）添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefor

文档地址安装npm i -S vuedraggable引入import draggable from "vuedraggable";<template> <div class="box"> <draggable v-model="list" chosenClass="active" animation="500" @end="dragEnd"> <div class="row" v-for="(item,index) in li

文档地址安装npm install vue-json-excel引用import JsonExcel from "vue-json-excel"; components: { "download-excel": JsonExcel, },<template> <div class="box"> <download-excel :fields="fields" :data="tableData" n

npm安装npm install vue-cropper页面引用import { VueCropper } from "vue-cropper"; components: { VueCropper, },<template> <div class="box"> <div class="crop"> <vueCropper ref="cropper" :img="option.img"

在src目录新建一个mixins文件夹，里面新建index.js文件export const mixin = { data() { return { mixinData: 123 } }, methods: { mixinFunction() { console.log("这是来自mixin的方法") } }}在组件中引入<template>

文档链接安装npm i vue-lazyload -Smain.jsimport VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad, { preLoad: 1.3, error: '', //错误图占位 loading: '',//加载图占位 attempt: 1, throttleWait: 300 //延迟图片加载时间})图片懒加载 <img v-lazy="item.imgurl" alt />

npm 安装npm install vue-drawer-layout --savemain.jsimport DrawerLayout from 'vue-drawer-layout'Vue.use(DrawerLayout)<template> <div class="box"> <vue-drawer-layout :drawer-width="230" ref="drawerLayout" @mask-click="closeMenu()"&g

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .bg {

点击富文本图片预览https://blog.youkuaiyun.com/AK852369/article/details/103235145富文本里的图片Push到数组https://blog.youkuaiyun.com/AK852369/article/details/105946823

<template> <div> <div class="playBotn" @click="playPack" > 点我开始抢红包 </div> <div class="ser_home" v-show="packShow" > <ul class="red_packet" id="red_p.

1.安装npm install axios -S2.新建3.http.jsimport axios from "axios";import qs from "qs";import { Dialog} from "vant";// axios.defaults.baseURL = 'http://hplqy.suoluomei.cn/index.php?s=/hfs/Api/' //正式axios.defaults.baseURL = 'http://hplqytest.suol

文档地址npm install wangEditor -simport wangEditor from "wangeditor";<template> <div class="box"> <div id="editor"></div> <div class="btn"> <el-button type="primary" @click="getEditorData" >生成的ht

import axios from 'axios'import qs from 'qs'let api_secret = '935bda53552e49cd56fc'// 基础配置if (process.env.NODE_ENV === 'production') { // axios.defaults.baseURL = 'https://' //线上版本域名 // api_secret = '84a58d7e0c1c89c4c57b41f4f396a45c' //线上版本秘钥 ax

一丶手机号（1）正则匹配 var phone = "13807999985"; var resultPhone = phone.replace(/^(\d{3})\d{4}(\d+)/, "$1****$2"); console.log(resultPhone);//138****9985（2）substr截取 var phone = "17610603529"; var mphone = phone.substr(0, 3) + "****" + phone.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https:/

console.log(app.getNowFormatDate(app.timeShj(res.data.jielongMemberExpirationTime * '1000'))) //时间搓转时间 timeShj(a) { var d = new Date(a); d = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate(); return d; }, // 年与日补个0 getNo

1.安装npm包npm install animate.css --save2.main.js引入import animate from "animate.css";Vue.use(animate);3.使用<div class="animate__animated animate__fadeInRightBig">哈哈哈</div>备注：这个是动画地址想用哪个用哪个属性：https: //animate.style/...