- 通过Vue CLI可以方便的创建一个Vue项目，但是对于实际项目来说还是不够的，所以一般都会根据业务的情况来在其基础上添加一些共性能力，减少创建新项目时的一些重复操作，本着学习和分享的目的，本文会介绍一下我们Vue项目的前端架构设计，当然，有些地方可能不是最好的方式，毕竟大家的业务不尽相同，适合你的就是最好的。除了介绍基本的架构设计，本文还会介绍如何开发一个Vue CLI插件和preset预... 通过Vue CLI可以方便的创建一个Vue项目，但是对于实际项目来说还是不够的，所以一般都会根据业务的情况来在其基础上添加一些共性能力，减少创建新项目时的一些重复操作，本着学习和分享的目的，本文会介绍一下我们Vue项目的前端架构设计，当然，有些地方可能不是最好的方式，毕竟大家的业务不尽相同，适合你的就是最好的。除了介绍基本的架构设计，本文还会介绍如何开发一个Vue CLI插件和preset预...
- 初始化结束后，如果存在el属性，那么最后会进行挂载操作：if (vm.$options.el) { vm.$mount(vm.$options.el)}$mount方法是个区分平台的方法，web平台的如下：const mount = Vue.prototype.$mountVue.prototype.$mount = function ( el, hydrating) { el ... 初始化结束后，如果存在el属性，那么最后会进行挂载操作：if (vm.$options.el) { vm.$mount(vm.$options.el)}$mount方法是个区分平台的方法，web平台的如下：const mount = Vue.prototype.$mountVue.prototype.$mount = function ( el, hydrating) { el ...
- 这一篇我们来看一下Vue核心的响应性原理，在上一篇我们知道了初始化时Vue会把data选项的数据递归的转换成响应性的数据，具体来说就是给数组和对象创建一个关联的Observer实例，然后对于数组，会拦截它的所有方法，以此来监听数组的变化，对于普通对象，会遍历它自身所有可枚举的属性，将其转换成setter和getter形式，以此来监听某个属性的变化，为什么要这么做呢，我们来看一下。首先简单介绍... 这一篇我们来看一下Vue核心的响应性原理，在上一篇我们知道了初始化时Vue会把data选项的数据递归的转换成响应性的数据，具体来说就是给数组和对象创建一个关联的Observer实例，然后对于数组，会拦截它的所有方法，以此来监听数组的变化，对于普通对象，会遍历它自身所有可枚举的属性，将其转换成setter和getter形式，以此来监听某个属性的变化，为什么要这么做呢，我们来看一下。首先简单介绍...
- 上一节我们大致看了一下实例化Vue时所做的事情，其中初始化data选项的部分我们跳过了，这一篇我们详细来了解一下。 初始化data选项先看一下初始化data的方法：function initData(vm) { let data = vm.$options.data // 获取data对象 data = vm._data = typeof data === 'function' ? ... 上一节我们大致看了一下实例化Vue时所做的事情，其中初始化data选项的部分我们跳过了，这一篇我们详细来了解一下。 初始化data选项先看一下初始化data的方法：function initData(vm) { let data = vm.$options.data // 获取data对象 data = vm._data = typeof data === 'function' ? ...
- 上一篇我们看了引入Vue时都有哪些操作，这一篇我们来看一下new一个Vue实例时会发生什么，测试代码如下：<div id="app"></div>const app = new Vue({ el: '#app', template: `<h1>{{text}}</h1>`, data: { text: 'hello' }})根据上一篇的最后我们知道Vue... 上一篇我们看了引入Vue时都有哪些操作，这一篇我们来看一下new一个Vue实例时会发生什么，测试代码如下：<div id="app"></div>const app = new Vue({ el: '#app', template: `<h1>{{text}}</h1>`, data: { text: 'hello' }})根据上一篇的最后我们知道Vue...
- 调试阅读源码最好的方式还是通过调试，否则很容易在源码里迷失方向，本文提供了一种方便的方式来调试：git clone https://github.com/wanglin2/learn_vue_2.6.0.gitcd learn_vue_2.6.0npx http-server -e js -c-1然后访问：http://【你的ip:端口】/examples/index.html即可打开测试... 调试阅读源码最好的方式还是通过调试，否则很容易在源码里迷失方向，本文提供了一种方便的方式来调试：git clone https://github.com/wanglin2/learn_vue_2.6.0.gitcd learn_vue_2.6.0npx http-server -e js -c-1然后访问：http://【你的ip:端口】/examples/index.html即可打开测试...
- 相比Vue2，Vue3的官方文档中新增了一个在线Playground：打开是这样的：相当于让你可以在线编写和运行Vue单文件组件，当然这个东西也是开源的，并且发布为了一个npm包，本身是作为一个Vue组件，所以可以轻松在你的Vue项目中使用：<script setup>import { Repl } from '@vue/repl'import '@vue/repl/style.css'</... 相比Vue2，Vue3的官方文档中新增了一个在线Playground：打开是这样的：相当于让你可以在线编写和运行Vue单文件组件，当然这个东西也是开源的，并且发布为了一个npm包，本身是作为一个Vue组件，所以可以轻松在你的Vue项目中使用：<script setup>import { Repl } from '@vue/repl'import '@vue/repl/style.css'</...
- 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第二篇，读完本篇，你可以了解到如何将一个Vue3组件库打包成各种格式上一篇里提到了启动服务前会先进行一下组件库的打包，运行的命令为：varlet-cli compile显然是varlet-cli包提供的一个命令：处理函数为compile，接下来我们详细看一下这... 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情本文为Varlet组件库源码主题阅读系列第二篇，读完本篇，你可以了解到如何将一个Vue3组件库打包成各种格式上一篇里提到了启动服务前会先进行一下组件库的打包，运行的命令为：varlet-cli compile显然是varlet-cli包提供的一个命令：处理函数为compile，接下来我们详细看一下这...
- ==Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。== 我们之前也学习过后端的框架 `Mybatis` ，`Mybatis` 是用来简化 `jdbc` 代码编写的；而 `VUE` 是前端的框架，是用来简化 `JavaScript` 代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下 ==Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。== 我们之前也学习过后端的框架 `Mybatis` ，`Mybatis` 是用来简化 `jdbc` 代码编写的；而 `VUE` 是前端的框架，是用来简化 `JavaScript` 代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下
- 1 什么是前后端分离前后端分离是目前互联网开发中比较广泛使用的开发模式，主要是将前端和后端的项目业务进行分离，可以做到更好的解耦合，前后端之间的交互通过xml或json的方式，前端主要做用户界面的渲染，后端主要负责业务逻辑和数据的处理。 2 Spring Boot后端搭建 2.1 Mapper层请参阅这篇文章https://blog.csdn.net/Mr_YanMingXin/artic... 1 什么是前后端分离前后端分离是目前互联网开发中比较广泛使用的开发模式，主要是将前端和后端的项目业务进行分离，可以做到更好的解耦合，前后端之间的交互通过xml或json的方式，前端主要做用户界面的渲染，后端主要负责业务逻辑和数据的处理。 2 Spring Boot后端搭建 2.1 Mapper层请参阅这篇文章https://blog.csdn.net/Mr_YanMingXin/artic...
- @TOC 前言前面一篇文章Vue开发历程—音乐播放器，实现了播放音乐，以及基本的布局。但是进度条没有实现同步，本文即介绍进度条的实现。 一、效果图 二、心路历程 1、elementUI 滑块的使用 <div class="block" style="margin-top:5px"> <el-slider v-model="value" @change="updateSlideTime()" ... @TOC 前言前面一篇文章Vue开发历程—音乐播放器，实现了播放音乐，以及基本的布局。但是进度条没有实现同步，本文即介绍进度条的实现。 一、效果图 二、心路历程 1、elementUI 滑块的使用 <div class="block" style="margin-top:5px"> <el-slider v-model="value" @change="updateSlideTime()" ...
- 大家好，我是CoderBin 前言面试官：“你说说Vue中的组件和插件有什么区别？”紧张的萌新：“vue组件是封装可复用的UI结构，插件好像是用vue.use()…”面试官：“…”······又来到了面试官系列，这次将带大家回顾一下Vue中的组件与插件的相关内容，帮助同学们在面试中更加游刃有余，希望对大家有所帮助，谢谢。如果文中有不对、疑惑的地方，欢迎在评论区留言指正🌻 一、组件概念回顾以... 大家好，我是CoderBin 前言面试官：“你说说Vue中的组件和插件有什么区别？”紧张的萌新：“vue组件是封装可复用的UI结构，插件好像是用vue.use()…”面试官：“…”······又来到了面试官系列，这次将带大家回顾一下Vue中的组件与插件的相关内容，帮助同学们在面试中更加游刃有余，希望对大家有所帮助，谢谢。如果文中有不对、疑惑的地方，欢迎在评论区留言指正🌻 一、组件概念回顾以...
- vue快速入门---高速版 vue快速入门---高速版
- @TOC 1.认识webpackwebpack是一个现代的JavaScript应用的静态模块打包工具1.模块化在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。 而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是Ja... @TOC 1.认识webpackwebpack是一个现代的JavaScript应用的静态模块打包工具1.模块化在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。 而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是Ja...
- ESLint配置ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。借助 ESLint，可将 静态代码分析 和 问题代码协助修复 集成到 编码、提交 和 打包 过程中，及早发现并协助修复代码中：有语法错误的部分不符合约定的样式准则的部分不符合约定的最佳实践的部分在项目开发中获得如下收益：在执行代码之前发现并修复语... ESLint配置ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。借助 ESLint，可将 静态代码分析 和 问题代码协助修复 集成到 编码、提交 和 打包 过程中，及早发现并协助修复代码中：有语法错误的部分不符合约定的样式准则的部分不符合约定的最佳实践的部分在项目开发中获得如下收益：在执行代码之前发现并修复语...
上滑加载中
推荐直播
-
DTT年度收官盛典：华为开发者空间大咖汇，共探云端开发创新2025/01/08 周三 16:30-18:00
Yawei 华为云开发工具和效率首席专家 Edwin 华为开发者空间产品总监
数字化转型进程持续加速，驱动着技术革新发展，华为开发者空间如何巧妙整合鸿蒙、昇腾、鲲鹏等核心资源，打破平台间的壁垒，实现跨平台协同？在科技迅猛发展的今天，开发者们如何迅速把握机遇，实现高效、创新的技术突破？DTT 年度收官盛典，将与大家共同探索华为开发者空间的创新奥秘。
去报名 -
GaussDB应用实战：手把手带你写SQL2025/01/09 周四 16:00-18:00
Steven 华为云学堂技术讲师
本期直播将围绕数据库中常用的数据类型、数据库对象、系统函数及操作符等内容展开介绍，帮助初学者掌握SQL入门级的基础语法。同时在线手把手教你写好SQL。
去报名
热门标签