随笔分类 - Vue3/Vue2框架生态链
摘要：1、安装一些需要编译的包：提示没有安装python、build失败等 因为一些 npm 的包安装需要编译的环境，mac 和 linux 都还好，大多都齐全 。window 用户依赖 visual studio 的一些库和python 2+，windows的小伙伴都装上： windows-build-
阅读全文
摘要：项目打包，默认是打包在根目录下面的。当然我们可以通过设置，打包到任意子目录中去。 但是，当项目中引入资源的，比如：引入图片资源、js资源、或者字体图标之类的。那么可能在这个中间又会踩坑。 1、在vue文件引入图片 例如，我们将一张图片放到资源目录 /static/image/lyf.jpg 我们在
阅读全文
摘要：本文主要解决： 1、vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; 2、静态资源打包使用相对路径后css文件引入图片路径错误问题。 一、问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后，部署项目至特定路径下：如：//ip:port/
阅读全文
摘要：一、SPA 不是指水疗。是 single page web application 的缩写。中文翻译为 单页应用程序 或 单页Web应用，更多解释请自行搜索。 所有的前端人员都应该明白我们的页面的 url 构成：http://www.fengcms.com/index.html?name=fungl
阅读全文
摘要：1、小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题，如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的，相当于浏览器设置了一道门槛，会报错XMLHTTPRequest can not load http://40.00.100
阅读全文
摘要：一、开发环境中跨域 使用 Vue-cli 创建的项目，开发地址是 localhost:8080，需要访问非本机上的接口http://10.1.0.34:8000/queryRole。不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置，不过 Vue-cli 创建的项目，可以直
阅读全文
摘要：首先确认 watch是一个对象，一定要当成对象来用。 对象就有键，有值。 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化，或者是data中的某个变量。 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。 值也可以
阅读全文
摘要：一、关于导航怎么设置路由 1、在el-menu这个标签的属性中添加 router ,官方文档的解释是：启用vue-router 这种模式 2、在el-menu-item标签中的index属性直接书写路由，就可以实现正常vue-router了 3、在el-menu-item标签中书写路由属性：:rou
阅读全文
摘要：iconfont字体图标使用就不多说了，大致是几部： 1、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压 2、在项目assets目录新建目录iconfont，用于存放刚才下载解压的代码 3、在main.js导入iconfont.css文件 import './assets/ic
阅读全文
摘要：vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 一、安装 二、实例 执行 GET 请求 执行 POST 请求 执行多个并发请求 三、axios API 1、可
阅读全文
摘要：一、环境搭建 1、安装node、npm、webpack，不多说 2、安装vue-cli脚手架构建工具，打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。 二、用vue-cli来构建项目 1
阅读全文
摘要：一、命名路由 有时我们通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。 我们直接在路由下添加一个 name 即可。 要链接到一个命名路由，可以给 router-link 的
阅读全文
摘要：一、visibilitychange事件 首先说一个h5事件 visibilitychange visibilitychange是浏览器新添加的一个事件，当浏览器当前页面被最小化，或者切换到浏览器的其他标签页，或者从其他页面或应用返回到当前标签页，都会触发这个事件。 document.visibil
阅读全文
摘要：我们说到如果监听的属性是个对象呢？那么这个对象中的其他属性岂不就是监听不了了吗？如下： 倘若user中的name、age属性变化，如何知道它们变化了呢？今儿，就来解决这一问题。 通过走读Vue源码，发现他是利用Observer构造函数为每个对象创建一个Observer对象，来监听数据的，如果数据中的
阅读全文
摘要：Vue有一核心就是数据驱动（Data Driven），允许我们采用简洁的模板语法来声明式的将数据渲染进DOM，且数据与DOM是绑定在一起的，这样当我们改变Vue实例的数据时，对应的DOM元素也就会改变了。 通过粗浅地走读Vue的源码，发现达到这一效果的核心思路其实就是利用ES5的defineProp
阅读全文
摘要：一、什么是数据驱动 数据驱动是vuejs最大的特点。在vuejs中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。 比如说我们点击一个button，需要元素的文本进行是和否的切换。在jquery刀耕火种的年代中，对于页面的修改我们一般是这样的一个流程
阅读全文
摘要：Vue能数据驱动视图发生变更的关键，就是依赖它的响应式系统。响应式系统如果根据数据类型区分，对象和数组它们的实现会有所不同；解释响应式原理，如果只是为了说明响应式原理而说，但不是从整体流程出发，不在Vue组件化的整体流程中找到响应式原理的位置，对深刻理解响应式原理并不太好 一、对象响应式数据的创建
阅读全文
摘要：一、vuex/pinia数据为proxy对象时如何获取值 1、问题背景：使用vue3.0时，因为底层是使用proxy进行代理的，所以当我们打印一些值的时候，是proxy代理之后的是Proxy对象，Proxy对象里边的[[Target]]才是真实的对象。 2、那么我们如何获取到其真正的值呢？ 3、第一
阅读全文
摘要：一、vue-resource特点 1、体积小：vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。 2、支持主流浏览器：和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器
阅读全文
摘要：在html中使用元素，会有一些属性，如class,id，还可以绑定事件，自定义组件也是可以的。当在一个组件中，使用了其他自定义组件时，就会利用子组件的属性和事件来和父组件进行数据交流。 父子组件之间的通信就是 props down,events up，父组件通过 属性props向下传递数据给子组件，
阅读全文
浙公网安备 33010602011771号