vue
关注
分享
扫一扫
文章平均质量分 58
vue相关技术积累
web修理工
这个作者很懒，什么都没留下…
展开
-
vite创建基本项目架构
参考vite官网:https://cn.vitejs.dev/guide/1.初始化升级最新版本：npm install vue@next创建名为'test'的项目：npm init vite-app test2.下载依赖 运行npm installnpm run dev3.加入ip登录4.依赖vue-router参考博客:https://juejin.cn/post/7001857870035681316npm install vue-router@4.0 创建src/ro原创 2021-12-07 10:40:52 · 1147 阅读 · 0 评论 -
vue 路由动态添加 动态文件
import Main from "@/components/main";// 配置 按钮import config from "@/config";const { isbnt } = config;// 代理到vuximport store from "@/store";export let initroute = function(arr) { let routes = [], butList = []; routes = arr.map((item, index) =.原创 2021-09-12 13:49:45 · 501 阅读 · 0 评论 -
vue3.0+Vue/Cli 4.5.0 项目搭建
1.初见vue3.0项目node v12.14.1npm 6.13.4vue/cli 4.5.0全局安装 vue/clinpm安装npm i -g @vue/cliyarn安装yarn global add @vue/cli创建vue 项目vue create datav-project手动配置vue3.0进入项目cd datav-project!注意:增加typeScript vue-router vue-store 都是ts版本添加 TypeScriptv原创 2021-08-20 16:13:14 · 795 阅读 · 0 评论 -
vue ajax封装loading extend store
通过vuex 进行loading数据管理store// 全局变量const state = { // 页面加载时 pageLoading: false, // 数据加载时 dataLoading: false, // 音频图标 calendaricon: 0,};// computed作用const getters = { calendaricon: (state) => { return state.calendaricon; }};//原创 2021-08-18 17:53:17 · 239 阅读 · 0 评论 -
vue 组件的方式 render extend component
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta http-equiv.原创 2021-08-16 14:44:48 · 477 阅读 · 0 评论 -
vuex 刷新数据消失处理 调用实例
1.vuex组件 vuex-persistedstatenpm install vuex-persistedstate --saveimport createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({ state, mutations, getters, plugins: [createPersistedState()]})在我们的localstorage中就会看到有一个vue原创 2021-07-05 10:58:08 · 167 阅读 · 0 评论 -
Vue 切换路由后页面回到页面顶部
backTop() { window.scrollTo(0, 0) document.body.scrollTop = 0 document.documentElement.scrollTop = 0}router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title } setTimeout(() => { window.scroll转载 2021-05-28 10:31:11 · 310 阅读 · 1 评论 -
Error: only one instance of babel-polyfill is allowed
然后就看了下他的配置文件，这个项目是用vue-cli2搭建的，主要引起错误的原因如下图所示：用了这种方式后，babel-polyfill与其他的插件造成了冲突，也就是说有两个地方都用到了babel-polyfill于是我的解决方案如下所示:第一步去掉配置文件的babel-polyfill entry: { app: './src/main.js', }第二步，在main.js加上以下代码 global 可以 类似于 windowif (!global._babelPoly.转载 2021-05-07 11:51:16 · 15053 阅读 · 0 评论 -
vue extend 其他表现形式 组件形式
这里是针对于vue1.0，如果要学2.0，建议大家去看官方文档vue2.0 http://vuefe.cn/guide/vue-router2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html第一种<div id="example"> <my-component></my-component></div><script src="../node_modules/转载 2021-02-04 17:28:49 · 143 阅读 · 0 评论 -
vue router 框架的理解(动态)
vue 框架的初始化1.data 声明 修改数据 —> $set(this.obj,‘key’,value’) 动态添加数据 减少声明时间2.compant 组件 路由声明 —>extend 动态申请组件 addRoutes动态添加路由3.store 静态声明 —> store 声明 添加this.$router.options.routes[0].children.push({//插入路由 name:'list', path: 'list', com原创 2020-12-24 11:42:47 · 164 阅读 · 0 评论 -
vue 动态添加router的实施方案 iview-admin2.0
1.下载异步加载插件npm install babel-plugin-syntax-dynamic-import@6.18.0 -D或者npm install babel-plugin-syntax-dynamic-import@6.18.0 --save--dev //插件依赖//.babelrc 文件夹中增加 "plugins": [ "syntax-dynamic-import" ],iview-admin2.0中实现的:https://github.com/ivie原创 2020-12-24 11:03:29 · 387 阅读 · 0 评论 -
Duplicate keys detected: ‘0‘. This may cause an update error.
一个template中有两个key值一样的v-for<div class="info" v-for="(item, index) in currentFriend.content" :key="index"> <div class="d1"> <p v-text="item.time" class="timeBox"></p> </div></div><div class="info2原创 2020-11-18 16:06:01 · 111 阅读 · 0 评论 -
Vue 打包后app.css,verondor.js文件过大 webpack
1.查看各部分文件大小及编译后文件大小(1) 使用webpack-bundle-analyzer工具，先安装依赖包 npm install cross-env --save-dev(2) 然后在package.json的scripts中添加“analyze”:“cross-env NODE_ENV=production npm_config_report=true npm run build”如下图"scripts": { "dev": "webpack-dev-server转载 2020-11-14 11:24:40 · 853 阅读 · 0 评论 -
vue 之this.$router.push、replace、go的区别
一、this.$router.push说明：跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面this.router.push(′/index′)this.router.push('/index')this.router.push(′/index′)this.router.push({path:’/index’})this.router.push(path:′/index′,query:name:′123′)this.router.push({path:'/index'原创 2020-10-11 15:59:00 · 173 阅读 · 0 评论 -
eachart 图表插件
组件使用//components <v-chart :options="polar" /> data() { let data = []; for (let i = 0; i <= 360; i++) { let t = (i / 180) * Math.PI; let r = Math.sin(2 * t) * Math.cos(2 * t); data.push([r, i]); } return { pola原创 2020-09-22 15:31:05 · 234 阅读 · 0 评论 -
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台，这个没什么花里胡哨的骚操作，直接看代码 （canvas + video）<template> <div> <!--开启摄像头--> <img @click="callCamera" :src="headImgSrc" alt="摄像头"> <!--canvas截取流--> <canvas ref="canvas" wi.转载 2020-08-07 16:30:46 · 814 阅读 · 0 评论 -
Vue keep-alive总结缓存
是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。1 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop:include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。在2.1.0版本Vue中常见用法：// 组件export default { name: 'test-keep-alive',转载 2020-08-07 16:08:28 · 284 阅读 · 0 评论 -
vue-cli 路径配置-打包
pack.json "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "dev:test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js", "dev:prod": "webpack-dev-server --inline --progress原创 2020-08-06 15:34:58 · 1683 阅读 · 0 评论 -
ESLint fix自动修复所有格式问题
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/ test/unit test/e2e/specs",npm run lint-fix,转载于:https://www.cnblogs.com/it-jason/p/9164308.html原创 2020-08-04 15:29:20 · 4067 阅读 · 1 评论 -
vue 集成scss
npm i -D sass-loader node-sass<style lang="scss" scoped> .img { width: 100%; }</style>集成vantnpm i vant-weapp -S --production原创 2020-08-04 11:38:42 · 360 阅读 · 0 评论 -
vue 之v-model的使用
1父组件<template> <div>{{aa}}</div> <odiv v-model="aa"></odiv></template><script>import odiv from "../components/odiv.vue";export default {data(){ return { aa:'aaa' }}components: { odiv: odiv },}原创 2020-07-22 17:35:01 · 91 阅读 · 0 评论 -
webpack 打包兼容ie
npm install babel-polyfill --savenpm install es6-promise/auto --save第二步： 在 Webpack中使用在webpack.config.js文件中，使用app: ["babel-polyfill", "./src/main.js"]替换原来的app: './src/main.js'重新启动项目 npm run dev ...原创 2020-07-21 11:49:34 · 1603 阅读 · 0 评论 -
webpack 2.xx自动打包配置 及axios二次封装
package.json "scripts": { "dev": "webpack-dev-server --inline --progress --config --hot --host 0.0.0.0 build/webpack.dev.conf.js", "dev:test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js", "dev:prod":原创 2020-07-18 17:28:33 · 333 阅读 · 0 评论 -
自己手动配置脚手架webpack完整详细版（一） ---webpac 基础配置
1.去除map文件map文件是js文件压缩后，文件的变量名替换对应、变量所在位置等原信息数据文件。个人理解是：对js压缩过程的记录，如浏览器支持，可以通过map文件还原文件到未压缩之前。productionSourceMap: false,2.CSS分离 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // c转载 2020-07-16 17:55:24 · 671 阅读 · 0 评论 -
Vue---兄弟组件通信（三种方式） vue bus
第一种：eventBus新建一个js文件， 我这里叫做 bus.js；文件内容： import Vue from 'vue'; export default new Vue();然后在你需要触发的 组件中引入 import bus from ‘文件路径’ 执行：bus.$emit('触发名称', 传输的数据 )最后在你需要的通信的另一个组件中 mounted生命周期钩子中执行如下：bus.$on('触发名称', res => {/转载 2020-07-15 14:42:07 · 12263 阅读 · 1 评论 -
vue component :is实现多个组件之间的切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue Component 标签</title> <script type="text/javascript" src="../assets/js/vue.js"></script></head><body><h1&转载 2020-07-15 10:00:34 · 1039 阅读 · 0 评论 -
vue-charts的基本使用
npm下载npm install echarts vue-echartsvue-cli2 { test: /\.js$/, loader: 'babel-loader',- include: [resolve('src'), resolve('test')]+ include: [+ resolve('src'),+ resolve('test'),+ resolve('node原创 2020-07-14 09:53:26 · 918 阅读 · 0 评论 -
vue动态子组件的实现方式
方式一：局部注册所需组件<div id="example"> <button @click="change">切换页面</button> <component :is="currentView"></component></div><script>var home = {template:'<div>我是主页</div>'};var post = {template:'<div转载 2020-07-13 16:34:16 · 516 阅读 · 0 评论 -
vue 翻页组件vue-flip-page
方法change （改变页面）tap （点击）turning （正在翻页）prev （前一页）next （后一页）翻到指定页面： handleSwitchManual(index) { if (index === this.currentIndex) return; this.$refs["turn"].toPage(index); this.currentIndex = index; this.goods_id = this.man原创 2020-07-06 10:01:04 · 3696 阅读 · 1 评论 -
vue extend 的基本使用
vue extend 的基本使用vue.extend 局部注册 的应用2请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。所以他不能直接在new Vue中这样使用： new Vue({components: fuck})最终还是要通过Vue.components注册才可以使用的。<!doctype html><html><head><meta charset="utf-8"><title>在Vue中注册组件<原创 2020-07-03 18:21:03 · 4674 阅读 · 0 评论 -
vue router的嵌套使用 按需加载
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', compone原创 2020-06-27 13:48:49 · 209 阅读 · 0 评论 -
vue 方法使用小结
1.常规使用 methods: { fn(){ ..... } }2.引入使用utils.jsexprot let fn=function(){ ..... }vue文件import { fn } from "@/libs/utils"; methods: { fu(){ //调用 fn() } }3.全局挂载mian.jsimport html2canvas from "html2canvas";Vue.prototype.$html原创 2020-06-10 20:59:54 · 127 阅读 · 0 评论 -
vue getters和computed类似 watch
//computed // computed:{ // fullName2:{ // get:function(){ // return this.fullName=this.firstName+this.lastName; // }, // set:function(){ // ..原创 2020-06-04 09:11:51 · 578 阅读 · 0 评论 -
mixins vue 混入 11.1-02(多事件并列事件)
<html lang="en"> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Mixins Option Demo</title> </head> <body> <h1>Mixin原创 2020-06-04 09:11:03 · 196 阅读 · 0 评论 -
vue 组件传参和方法调用 vuex bus ajax
父单向传子 pro :bb bus路线监听 vm.$on<template> <div> <div>尾部</div> <div>{{str}}</div> <!-- <foothead :bb="'你好地方'"></foothead> --> <foothead ref='foot' v-for="item in arr" :key="item" :bb原创 2020-06-04 09:07:40 · 284 阅读 · 0 评论 -
vue的Router相关配置
import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({ routes: [ // {path: '/',name: 'HelloWorld',component: HelloWorld } {path:'/',name:'index',com原创 2020-06-04 09:07:08 · 149 阅读 · 0 评论 -
vue 首页白屏优化
方法一 <style> #app { height: 100vh; position: relative; } .im { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; width: 100px; height: 100px; } &原创 2020-06-02 09:02:04 · 1397 阅读 · 0 评论 -
vue全局组件弹框 extend
//share.vue<template> <transition name="fade"> <div class="mask" v-if="show" @click="show=!show"> <img :src="imgUrl" alt=""> </div> </transition></template><script>export default { d.原创 2020-06-02 09:01:38 · 188 阅读 · 0 评论 -
vue 使用Element
安装Elementnpm i element-ui -S完整引入import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({ el: '#app', render: h => h(App)});局部引入npm原创 2020-06-02 09:00:41 · 168 阅读 · 0 评论 -
Vue中直接操作DOM元素操作
传统document 操作<div id="oid" class="cla"></div><input type='input' name='age'><script> var odiv=document.getElementsByTagName('div') //获取div标签的伪数组 var oinput=document.getElementsByName('age') // 获取 name属性伪数组(系统自带也可以人为添加) var o.原创 2020-05-29 09:57:20 · 2022 阅读 · 0 评论