![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 61
一年翻倍
这个作者很懒,什么都没留下…
展开
-
开发业务组件库踩坑记录
1、打包完业务组件库特别大,由于依赖了很多包如axios,echarts都会被打包进来;chainWebpack: config => { config.module .rule('js') .include .add('/packages') .end() .use('babel') .loader('babel-loader') .原创 2021-09-15 16:13:06 · 351 阅读 · 0 评论 -
qiankun
一、前言什么是微前端Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。更多关于微前端的相关介绍,推荐大家可以去看这几篇文章:Micro Frontends Mi转载 2021-07-23 18:33:29 · 265 阅读 · 0 评论 -
微前端初探
每日优先:https://juejin.cn/post/6844903943873675271最全的微前端解决方案https://zhuanlan.zhihu.com/p/783620281、微前端框架需求与目的新旧子项目混合的大型项目,控制台类型大型项目平滑升级,独立开发,独立部署增量升级:渐进式重构无技术栈限制工程治理独立运行。。。。微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用后,随..原创 2021-07-23 18:14:19 · 314 阅读 · 0 评论 -
在搭建一个vue-cli项目时,如何配置能够优化加载速度
1、搭建vue-cli 脚手架,查看原文章https://blog.csdn.net/weixin_39854011/article/details/1124328732、配置webpack,借助一些插件来优化:有人疑惑package.json为什么要分devdependencies 和 dependencies?dependencies中的 npm包在线上环境使用,而其余的如各种loader,babel全家桶及各种webpack的插件等,其实在上线之前已经发挥出他的作用,所以不需要被打到包中上线。原创 2021-04-10 16:54:25 · 390 阅读 · 0 评论 -
使用Font-Awesome图标字体库
方法一,在vue +Element 的项目中直接安装、使用Font-Awesome图标字体库:1、 安装font-awesome:2、在main.js中引入:import ‘font-awesome/css/font-awesome.css’在组件中使用.<template> <div> 微信:<span class="fa fa-wechat "></span> </div></template>也可以直原创 2021-02-24 17:00:34 · 1895 阅读 · 0 评论 -
Vue.js中引入图片路径的几种方式
vue中静态资源的引入机制Vue.js关于静态资源的请查看:官方文档静态资源可以通过两种方式进行处理:1、在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。诸如 <img src="..."、background: url(...) 和 CSS @import 的资源 写在 template 中内联 style 的 background: url(...) 样式, 在当前版本的测试中,即使使用了相对路径原创 2021-02-24 15:30:16 · 2736 阅读 · 0 评论 -
vue实战优化 打包后 vender文件过大问题
1.查看vue、vue-router、axios、vant 版本:2.在index.html 中引入 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8.1/lib/index.min.css"> <script type="text/javascript" src="./static/lib/vue.min.js"></script> <script type="te原创 2021-02-23 15:48:49 · 299 阅读 · 0 评论 -
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
转:https://www.jb51.net/article/162760.htm原创 2021-02-23 15:39:56 · 1200 阅读 · 1 评论 -
vue 开发环境前端服务器代理,proxyTable使用
以下是我转发的,博主正文在此:https://www.cnblogs.com/wasbg/p/12659610.html我们在使用 vue-cli 工具生成 vue 项目时vue init webpack my-project-vue在生成的项目结构里,会有一个 index.js 文件.在这个 index.js 文件里,会有一个 proxyTable 的空节点.理解这个节点的作用需要有两个前置知识前端跨域利用代理服务器进行跨域.proxyTableproxyTable 是 vue-cl原创 2021-01-26 13:09:37 · 1068 阅读 · 0 评论 -
前端环境安装
安装前端开发环境:1.node.js 安装https://blog.csdn.net/weixin_39854011/article/details/105904343下载安装包: https://nodejs.org/en/download/傻瓜安装配置环境变量重启ide原创 2021-01-25 16:34:28 · 298 阅读 · 0 评论 -
记录:vue.config.js 中eslint配置错误导致的问题 Child compilation failed:
Error: Child compilation failed: Module parse failed: Unexpected token (1:0) File was processed with these loaders: * ./node_modules/html-webpack-plugin/lib/loader.js * ./node_modules/eslint-loader/index.js You may need an additional loader to handl原创 2021-01-10 22:31:14 · 2066 阅读 · 0 评论 -
初始化一个vant H5项目
1.首先初始化一个 cli的项目:https://blog.csdn.net/weixin_39854011/article/details/1093646952、npm i vant3、自动按需引入组件 :npm i babel-plugin-import -D在babel.config.js 中新增配置: module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirect原创 2021-01-10 22:25:13 · 605 阅读 · 0 评论 -
前端优化首屏加载速度
执行npm run build,将打包代码部署上线后访问项目,会发现表现很糟糕,页面会出现长时间的空白等待,这是无法忍受的性能问题,迫切需要解决。1、路由懒加载。原来的路由引入组件import Index from @/views/index.vue;{ path: '/' name: 'index' component: Index}现在引入路由(vue异步组件)import Vue from 'vue';import Router from 'vue-router';Vue.u原创 2020-12-27 21:48:07 · 1810 阅读 · 0 评论 -
前端开发中history 路由和hash路由的选择
1.为什么要有前端路由:对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。2.浏览器目前提供了两种路由:hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。 比如这个URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL中,但原创 2020-12-27 15:57:08 · 1011 阅读 · 0 评论 -
Vue中的diff算法
1. 为什么要用Diff算法由于在浏览器中操作DOM的代价是非常“昂贵”的,所以才在Vue引入了Virtual DOM,Virtual DOM是对真实DOM的一种抽象描述,即使使用了Virtual DOM来进行真实DOM的渲染,在页面更新的时候,也不能全量地将整颗Virtual DOM进行渲染,而是去渲染改变的部分,这时候就需要一个计算Virtual DOM树改变部分的算法了,这个算法就是Diff算法。2. 传统的Diff算法传统的Diff算法通过循环递归对节点进行比较,然后判断每个节点的状态以及要做原创 2020-11-24 23:01:08 · 964 阅读 · 0 评论 -
vue的生命周期
Vue生命周期四个阶段什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!生命周期钩子:就是生命周期事件的别名而已;生命周期钩子 = 生命周期函数 = 生命周期事件意义:给了用户在不同阶段添加自己的代码的机会。初始化 (create)— 组件挂载(mount)-----组件更新 (update)— 销毁(destroy)生命周期发生了什么beforeCreate初始化界面前 : 在当前阶段data、methods、co原创 2020-11-19 10:19:07 · 264 阅读 · 2 评论 -
vue 路由懒加载(延时加载、按需加载)
import和require的区别node编程中最重要的思想就是模块化,import和require都是被模块化所使用。遵循规范require 是 AMD规范引入方式import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用,所以require理论上可以运用在代码的任何地方import是编译时调用,所以必须放在文件开头本质require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个原创 2020-11-16 23:04:09 · 1669 阅读 · 0 评论 -
vue-cli创建项目
常用命令通过命令行查询可用的包的版本号npm view vue-cli versions --json查看vue-cli 最新版本vue --version 或 vue -V卸载之前版本npm uninstall vue-cli -g 或 yarn global remove vue-cli(通过 npm install -g vue-cli 下载的版本)npm uninstall -g @vue/cli (通过 npm install -g @vue/cli 下载的版本)vue脚手架初始化原创 2020-10-29 17:43:38 · 452 阅读 · 0 评论 -
Vue调试工具vue-devtools安装步骤
Vue调试工具vue-devtools安装它可以让你在一个更友好的界面中审查和调试 Vue 应用git下载:可以直接从git上手动下载,或者使用命令git clone https://github.com/vuejs/vue-devtools在vue-devtools目录下安装依赖包打开命令窗口cd vue-devtools执行npm install 或者cnpm inst...原创 2020-05-08 09:44:50 · 606 阅读 · 0 评论 -
如何理解虚拟DOM树提高效率
前面是官方解释官网概念:Vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。一棵真实DOM树的渲染需要先解析CSS样式和DOM树,然后将其整合成一棵渲染树,再通过布局算法去计算每个节点在浏览器中的位置,最终输出到显示器上,这些步骤在浏览器的渲染过程及页面加载的优化方案一文中有详细的说明。而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息,而这些信息可以通过对象的形式一直保存在内存中,并通过JavaScript的操作进行维护。什么是虚拟 dom虚拟DOM是对应于浏览器渲染原创 2020-09-07 15:59:58 · 561 阅读 · 0 评论 -
Vue 中 组件以及Prop数据流向
对组件以及props的理解组件相当于定义一个函数,使用组件的(如父组件)相当于是调用函数,这时候如果需要传值的话,要从父组件传递;而props就是将父组件通过props 向下传递给子组件;子组件通过 events 给父组件发送消息。需要保证每个组件可以在相对隔离的环境中书写,这样能提高组件的可维护性。父组件向子组件传递数据分为两种方式:动态和静态;组件使用://子组件代码如下:// const data = { text: 123 } const component = { te..原创 2020-05-20 11:26:54 · 327 阅读 · 1 评论