Vue本地应用前言内容绑定，事件绑定v-text指令v-html指令v-on指令基础案例练习：计数器显示切换，属性绑定v-showv-ifv-bind案例练习：图片切换列表循环，表元素绑定v-forv-on补充v-model案例练习：记事本小结 前言本文是Vue框架学习的第二部分-Vue的本地应用，从“内容绑定，事件绑定”，“显示切换，属性绑定”，“列表循环，表元素绑定”三个方面学习v-text
如何导入GitHub下的vue项目，并在本地电脑启动一、准备工作node.js环境（npm包管理器）vue-cli 脚手架构建工具cnpm、npm 的淘宝镜像注： Henley-PC已经使用全局安装好，（建议全局安装）其他电脑需检查二、安装node.js安装node.js比较简单，需要该安装路径则修改，直接下一步即可注：建议安装比较新版本的node.js，否则新版本cnpm等不支持旧版本node.
转载
2024-05-15 08:56:00
170阅读
1.vue打包的问题 一次在两个电脑中给同一个项目打包，打出来dist文件的不一样打，一个15.7M ,一个3.7M，同样的代码，同样的命令，为什么打出来的包差别这么大。查了一下代码，发现vue.config.js这个文件不同。在create vue的时候，这个文件没有被创建，需要自己手动添加，内容如下module.exports = {
productionSourceMap: fal
转载
2024-07-02 21:25:38
74阅读
源码分析vue computed在阅读本文之前，建议先了解vue响应式原理和watch侦听器相关原理，可以看一下源码分析vue响应式原理 和源码分析vue watch侦听器，将有助理解computed。用法示例var vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
vue中使用amap这几天被公司要求在APP端做出一个地图，且在地图上来显示不同公司的详细信息的功能。众所周知，人们在面对一个新的陌生事物时，可能会有一种陌生以及不安的心理（ps: 那些大佬当我没说），俺也一样。所以记录一下本次做地图的一些细节以及具体做法。那么废话不多说，直接开始吧。一： 首先得知道地图的基本展现（你得能先让地图主体出来，在搞其他）1.1 安装 （ 官方链接：https://el
由于前几篇文章是用vue-cli直接分析的，今天我们学习直接调试vue源码。安装vue（mac机)1.在GitHub上克隆官方的vue-地址 2.安装依赖npm install修改vue项目1.在package.json script dev 增加--sourcemap指令"dev": "rollup -w -c scripts/config.js --environment TARGET:web
Vue学习杂记（六）——项目构建与sourceMap一、项目发布1.1构建生产模式1.2配置clean-webpack-plugin插件1.3对webpack安装的插件的管理二、sourceMap的配置 一、项目发布1.1构建生产模式 webpack打包的最后一步便是发布了，首先在package.json文件的"scripts"中添加如下脚本名称和webpack打包方式："build":"
转载
2024-04-25 15:03:26
200阅读
sourceMap到底是个啥玩意？一、前言sourceMap是一个由来已久的名词，自从2013年jQuery开始支持以来，开始逐渐广泛的被应用于各种打包工具上，最具标志性的便是前端er必须具备的webpack。webpack是一个模块打包工具，在使用的过程中有许多配置项可以选择，例如：source-map、cheap-module-source-map、cheap-source-map、eval-
写在最前面拥有全球数据库国内好像就只有百度地图有，高德、搜狗、腾讯的都不行，但是由于百度地图的数据更新不及时，所以在做相关项目要用到国外数据的时候，最好还是推荐使用bingMap。bing Map 使用教程（基础）参考文档： bing Map 官方教程bing Map 初始化引入bing map资源<script type='text/javascript' src='http://ww
一、 配置 proxy 跨域module.exports = {
devServer: {
open: true, // 自动启动浏览器
host: 'localhost', // localhost
port: 8080, // 端口号
hotOnly: false, // 热更新
overlay: {
// 当出现编译器错误或
这一节，依然是深入剖析Vue源码系列，上几节内容介绍了Virtual DOM是Vue在渲染机制上做的优化，而渲染的核心在于数据变化时，如何高效的更新节点，这就是diff算法。由于源码中关于diff算法部分流程复杂，直接剖析每个流程不易于理解，所以这一节我们换一个思路，参考源码来手动实现一个简易版的diff算法。之前讲到Vue在渲染机制的优化上，引入了Virtual DOM的概念，利用Virtual
前言在「Vue3」中，创建一个组件实例由 createApp 「API」完成。创建完一个组件实例，我们需要调用 mount() 方法将组件实例挂载到页面中：createApp({
...
}).mount("#app");在源码中整个组件的创建过程:mountComponent() 实现的核心是 setupComponent()，它可以分为两个过程：开始安装，它会初始化 props、slo
1、首先我们看看通过vuejs脚手架工具生成项目配置文件config/index.js文件，通过看配置我们可以看到这样一项配置，productionSourceMap: true这个配置的作用用于是否生成source map文件。当配置为true时，在打包的过程中会生成source map文件，从而帮助调试代码。但是在我们发布代码的时候是已经调试好的代码，所以生成source map意义不大，于是
转载
2024-09-30 22:59:25
68阅读
vue 遮罩层阻止默认滚动事件操作在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。vue中提供 @touchmove.prevent 方法可以完美解决这个问题如果不是使用Vue的话，可以给body添加overflow:hidden属性解决补充知识：vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动)vue项目中弹出层时，蒙版下还可以滚动页面。移动端解决方案在蒙
转载
2024-07-05 21:57:24
72阅读
首先说明一下，我优化的项目是基于vue3 + ts的一个项目，使用的是webpack5的版本，不一定非要是webpack5经测试4也可以正常使用 若想查看自己当前项目的webpack版本，可以找node_mod
由于前几篇文章是用vue-cli直接分析的，今天我们学习直接调试vue源码。安装vue（mac机)1.在GitHub上克隆官方的vue-地址 2.安装依赖npm install修改vue项目1.在package.json script dev 增加--sourcemap指令"dev": "rollup -w -c scripts/config.js --environment TARGET:web
转载
2024-06-01 23:47:19
148阅读
1、什么是环境变量呢？可以在父shell和子shell中都能调用的就是环境变量，只能在本shell中使用的变量就是普通的变量。2、什么是环境变量配置文件呢?linux 中所有需要永久生效的内容，都必须写入配置文件中；同样，对于环境变量，想要在系统重启或者其他情况下，让该环境变量永久生效的方法，就是将环境变量信息写到环境变量配置文件中3、source命令功能：如果修改了环境变量的配置配置文件，必须退
vue源码
1. 请说一下Vue2响应式数据的理解先知道基本的问题在哪源码的角度回答你用的时候有哪些问题可以监控一个数据的修改和获取操作。针对对象格式会给每个对象的属性进行劫持 Object.defineProperty源码层面 initData -> Observer -> defineReactive 方法（内部对所有的属性进行了重写 性
转载
2024-05-21 05:57:26
267阅读
vue项目如何打包问题遇到得坑及其总结如何打包 基于Vue-Cli,通过npm run build来进行打包的操作如何部署 将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以直接将这两个文件扔到服务端 但有时候，我们会直接将dist文件扔到服务端 出现的问题打包到服务器后，出现资源引用路径的问题 打包到服务器后，出现空白页的问题 打包到服务
转载
2024-07-18 21:49:10
113阅读
vue 打包后 static 中图片路径不对的问题 `template` 中 `img` 标签中 `src` `template` 中 `img` 标签中 `v-bind:src` 在做这个 vue-cms 项目时，npm run build 打包部署后，然后 访问 的时候，发现：图片不能正常的显示（包括背景图，logo 之类的），请求的路径都 404 了。我的图片都放在了 static/imag
