harmsworth的博客

【Vue3】Vue3命令行构建项目的2种方式

【Vue源码解读】第1080~1910行

【Vue源码解读】第616~853行

前言Vue2 的源码2年前粗略的看过一遍，重点在对响应式属性、对象监听、watch、computed、生命周期等内容的理解，但好记忆不如烂笔头，当初没有做笔记，现在重读一遍，针对重点内容详细解读并记录。本系列文章以打包后源码为主，可以更直观的源码阅读，可以区分源码重点分段，增强自己对源码的掌握成都。版本Vue.js v2.6.14源码目录第1~612行.........

【Vue源码解读】第1~612行1~10行：挂载Vue11~111行：全局判断函数第112~354行：高阶函数、闭包、全局函数重点解析355~612行总结1~10行：挂载Vue(function (global, factory) { // 检查CommonJS规范 if (typeof exports === 'object' && typeof module !== 'undefined') { module.exports = factory() } else

为什么Vue组件中data是一个函数，而小程序中data是一个对象前言Vue组件脚本模板小程序Component构造器定义组件Page构造器注册页面总结前言日常工作中经常使用 Vue 和 小程序，对于Vue组件中data是一个函数，能够理解，但不够深入，小程序中data是一个对象更是百思不得其解，细细思考，偶有所得。Vue组件脚本模板export default { components: { }, mounted () { }, computed: { }, //

【Vue3】解决'defineProps' is not defined报错前言环境配置定位问题修改配置总结前言2021年结束了，Vite 的版本也升级了，现在试试新版 Vute 搭建 Vue 项目。按照 vue3一步一步的详细讲解配置ESLint 中 vue 官方推荐安装 ESLint 的方式安装 Eslint，结果发现 'defineProps' is not defined 报错，现在来解决这个问题。环境vite 2.7.2vue 3.2.25配置// vite.config.

vue3解决no-unused-vars前言添加配置前言在上一节，针对 vue3配置了ESLint，此时，App.vue 和 HelloWorld.vue 报了一个 no-unused-vars 的错误。添加配置vue3 是尤大写的，参考下尤大的配置：.eslintrc.js{ 'no-unused-vars': [ 'error', // we are only using this rule to check for unused arguments sinc

vue3配置ESLint前言环境说明安装standard规范初步总结vue 官方推荐安装 ESLint对比2个package.json再次总结airbnb规范总结前言对于前端项目而言，ESLint 可以检查代码，统一代码风格，避免不必要的错误。在 vue3 中配置 ESLint，如下所示。环境vite 2.3.3vue 3.0.5说明由于在 ESLint优先级 中 .eslintrc.js 的优先级最高，故使用 `.eslintrc.js。准备一个 vue3 项目，请移步 vite构

vue3按需加载第三方库组件前言环境安装 Element Plus完整引入按需加载安装 vite-plugin-importer 插件安装配置安装 vite-plugin-style-import安装配置总结前言以 Element Plus 为例，配置按需加载组件和样式。环境vue3.0.5vite2.3.3安装 Element Plusyarn add element-plus# ORnpm install element-plus --save完整引入import { cre

vue3定义全局组件前言注册全局组件使用全局组件配置 vue 构建版本总结前言vue3 全局组件需在 main.js 中定义，参考官网中的 2 个例子，实操如下。若需构建 vue 项目，请移步 vite构建vue3项目。目录如下注册全局组件// main.jsimport { createApp } from 'vue'import App from './App.vue'// createApp 函数创建一个应用实例const app = createApp(App)// 定义全局

使用vite创建vue3项目环境准备创建项目环境准备安装最新版本 @vuejs/appyarn global add @vue/cli# ORnpm install -g @vue/cli升级到最新版本 @vitejs/appyarn global upgrade @vue/cli# ORnpm update -g @vue/cli查看 vue 版本vue -V@vitejs/app 依赖的 node 版本大于等于 12故切换 node 版本，可查看该文章：使用

前言在使用 vue-router 的组件内的守卫 beforeRouteUpdate (2.2 新增)时，需要注意组件内守卫获取路由参数的时机。beforeRouteUpdate 当组件内子路由发生变化时，会出发该导航守卫。环境vue 2.5.2效果当路由更新之后，可以从 this.$route 中获取到 params 中的参数。代码index.vue<templat...

图片全屏查看组件前言环境效果如下目录结构代码前言在一些博客网站上，经常能看到点击图片，然后图片全屏展示，再次点击屏幕，图片还原，现在就要完成这样的组件。环境vue2.5webpack3.6less效果如下目录结构src/index.vuesrc/ImageFullscreen.vue代码<!-- ImageFullscreen.vue -->/* *...

返回上级页面前言环境有问题的效果Vue Router实现代码实现正确的效果总结前言在用 vue 做 PC 项目时，有这么一个需要，从首页进入次级页面，然后点击次级页面的返回按钮返回首页。一个很简单的功能，用 Vue Router 的功能就可以实现。环境vue2.5webpack3.6element-ui2.6.1有问题的效果可以观察到，当进入 other 页面后，复制链接，重...

    作为一名前端开发，做页面没有动画效果实在不能忍受！无论是简单的淡入淡出，还是抖动等。下面就讲讲一个简单的动画库animate.css。因为工作中经常用到vue2，所以下面就以vue做出发点。    一、关于vue2-animate依赖包    vue2-animate是一个可在vue.js中直接加载并使用的依赖包。安装方式在githut中，我就不多言了。下面要讲的直接引入css的方式使用该...

vue自定义面板指令在开发项目时，用到了许多有遮罩层的面板，这些面板很生硬，大小固定，位置固定，无法最小化等等缺点。我就很想使用一个vue自定义指令解决这些问题，对于任何一个面板，只需要在该面板元素添加一个v-panel指令，这个面板就可以拖拽了！ 项目文件如下： 环境：vue2+scss，不要忘了在App.vue中引入index.scss哦！1.定义面板和遮罩层样式panel...

vue公共组件之回到顶部组件vue公共组件之回到顶部组件技术栈实现方式：设计图标样式回到顶部组件用于测试的组件最终效果今天在看PSD图时，发现图片右下角有一个包含向上箭头的小图标，点击这个图标，马上返回页面顶部。这个小图标引起了我的兴趣，有几种实现方式？能否抽取成公共组件，在整个项目中使用呢？马上开干！ 技术栈vue2.5框架webpack3.6...

mockjs-生成随机数据mockjs-生成随机数据概述环境引入mock.js文件mock.js文件-拦截ajax请求，返回数据使用axios发起http请求概述现在，前后端分离趋势很明显，前端负责数据展示、页面动态效果等，而后端负责编写应用程序接口，供页面、第三方等调用。工作时，常常遇见的问题是：前端已经写好了页面，一直在等待后端接口的联调，等待也不是办...

iSlider使用环境最简单的使用方式效果如下：参考iSlider今天要介绍的插件是具有丰富功能的移动端插件-iSlider。iSlider是一个表现出众，轻量且高性能，无任何库依赖的跨平台滑动控件。它能够处理大多数的滑动场景，提供多种切换动画效果，展示多种类型的场景。使用环境vue2.5iSlider三张用于滑动的图片最简单的使用方式...

自定义指令传参指令环境传参方式参考自定义指令传参指令在vue官网中，常用指令有v-model和v-bind，但是，如果我们需要对DOM元素进行底层操作，就需要用到自定义指令。今天主要讲到传参的2种方式。环境vue2.3.3node6.11.2webpack2.6.1 传参方式在main.js中定义一个指令。Vu...

使用SASS环境npm安装sasssass和scss的区别配置别名引入全局样式效果参考使用SASSSASS是Statements on Auditing Standards的缩写，意思是审计准则说明书，扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性，生成良好格式化的 CSS 代码，易于组织和维护。环境vue2.5vue-ro...

一、介绍二、环境三、vue-loader四、vue-loader编译规则五、使用方式六、参考一、介绍在使用vue-cli脚手架初始化项目时，正式的项目一般使用官方的webpack模板，这个模板拥有高级功能的webpack + vue-loader，以下的项目就是用webpack模板搭建的。二、环境vue2.3.3webpack2.6.1三...

一、打包命令二、方法如下三、打包后的入口index.html四、参考一、打包命令vue项目打包执行的命令是npm run build，即执行package.json中定义的build.js文件。二、方法如下1、在webpack输出的发布路径中加入"."开头的相对路径，以供浏览器识别。 2、覆盖此加载程序的publicPath设置 ...

proxyTable代理前言介绍配置分离1. config.dev.js2. proxyTableHandler.js效果如下前言用了vue有一年多了，从最初的摸着石头过河到现在已经能熟练的使用vue开发项目，学到了许多，特别是vue的代理配置让我眼前一亮，甚是喜欢，故将自己对proxyTable代理配置整理出来，供致力于的开源的同辈浏览，望大家手下留情，哈哈_。介绍vue的proxyTa...

可编辑div组件

可编辑div