Vue.js

在vue中，通过sass定义一个变量 $height: 100px; #div{ height: calc(100% - $height); } 此方法行不通，将变量用#{}包裹起来即可 $height: 100px; #div{ height: calc(100% - #{$height}); } 来源： oschina 链接： https://my.oschina.net/u/4664213/blog/4888255

下载vue-devtools,地址: https://github.com/vuejs/vue-devtools 解压到对应目录,eg: D:\ProgramFiles\vue-devtools-dev 进入解压的目录中,npm install npm install #可能需要静心等待一段时间 npm run build 修改配置文件,D:\ProgramFiles\vue-devtools-dev\shells\chrome 目录 manifest.json 文件， "persistent": true Open Chrome extension page Check "developer mode" Click "load unpacked extension", and choose shells/chrome. 在插件目录vue-tools下执行下面命令，这样插件就会安装在浏览器中了，以后再运行项目，就不需要再执行这个命令了。 npm run dev 验证 如果后期vue面板不出来，再到vue-devtools文件夹下执行一遍npm run dev。 来源： oschina 链接： https://my.oschina.net/u/4416802/blog/3845047

前端课程体系 axure ：(属于UI课程) （1） 用于作需求分析 、画原型。最基本的是增删改查。 （2）项目： 可行性分析：项目经理 需求分析：开发人员、项目经理、甲方 （罗列功能、原型设计出一套页面->开发人员） 实际开发 （3）展示原型页面： 1.以图片方式展示：文件->导出page1为图像 2.以原型文件方式：以后缀名.rp文件存储 文件->保存（.doc，.png，.txt） 3.以html文件方式 以.html为后缀名；.js文件 发布->生成html配置 前端三大底层语言 ：html、css、Jss(javascript) 框架语言 ：Jquery、Vue(react、angular Js)、node 企业级框架 ：vue-element-admin/template、mysql 1.html+css : 网页重构、静态，比较简单。（标签、缩放布局会不会乱，如果缩放布局会乱掉立马改。） 重点 ：布局！！！（面试会问） 2.第一阶段项目 ：网页重构 3.动态 ：Js、Jquery（第二阶段项目） 4.Vue企业级开发框架 PC端、App端（第三阶段项目 最多项目！） 前端体系最重要的！ 三种企业级开发框架： Vue 、react、angular Js. 5. 学完Vue 就可以 找工作 了！着手于写简历、投简历、面试。 6.微信小程序 7.node Js 来源：

本文代码略多，希望大家耐心观看 背景介绍 在2020年， Vue3 的学习一直被我鸽到了11月份，在学完以后，我自己做了一个 Vue3 的小项目 nav-url ，也整理了我对于如何快速上手 Vue3 的几篇博客，很高兴受到了大家的指点和喜欢： 自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍） (237+ 个👍) 公众号： 前端印象 不定时有送书活动，记得关注~ 关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】 在上一篇博客中，我详细介绍了一下我发的第一版项目的特色、亮点以及所有核心功能的实现，希望大家可以前往阅读体验一下（记得用电脑打开，因为这是一个PC端的项目） 然而，这项目只是实现了一些功能，但我感觉并没有很好地利用 Composition API 去对代码进行整合管理。要知道， Composition API 的出现就是为了解决 Options API 导致相同功能代码分散的现象，也有很多大佬对其做了很多的动画展示（这里我借用一下 大帅搞全栈 大佬精心制作的动画，他的这篇文章可以说是好评连连，大家可以观摩一下： 做了一夜动画，就为让大家更好的理解Vue3的Composition Api ） 看了一下我项目初版的代码，简直是没有体现出 Composition API 的优势，可以给大家看一下某个组件内的代码

单文件组件介绍 vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封装了html、js、css的代码，它自身是一个独立的组件，所以成为单文件组件； vue文件结构 由于.vue封装了html、js、css的代码，所以它由以下几部分组成； <template> html </template> <script> js </script> <style> css </style> vue-loader： 如果使用.vue文件，需要使用指定加载器，否则浏览器是不能解析的。加载.vue文件的加载器是 vue-loader； 同理，一个项目中还需要html、css等，所以也要用到其对应的加载器 例：html-loader、css-loader… vue-loader是基于webpack的，要在webpack中进行配置，所以还要配置webpack； webpack： javaScript应用的静态模块打包器；把前端各种资源作为模块处理、使用、打包； 官网： 点击前往 单文件组件项目结构与依赖安装 创建项目结构 基于webpack的单文件组件项目基本结构 1、index.html 基本页面 2、App.vue vue根组件 3、 main.js 入口文件 4、package.json 项目配置文件 5、webpack.config.js webpack配置文件 6、 .babelrc

webpack在build包的时候，有时候会遇到打包时间很长的问题，这里提供了一个解决方案，让打包如丝般顺滑~ 1. 介绍 在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react ， lodash ， vue 我们希望能和自己的代码分离开，Webpack 社区有两种方案 CommonsChunkPlugin DLLPlugin 对于 CommonsChunkPlugin ，webpack 每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开。而 DLLPlugin 则是能把第三方代码完全分离开，即每次只打包项目自身的代码。Dll这个概念是借鉴了Windows系统的dll，一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。 2. 模板webpack-simple 用法 要使用 DLLPlugin ，需要额外新建一个配置文件。所以对于用这种方式打包的项目，一般会有下面两个配置文件 webpack.config.js webpack.dll.config.js 在项目根目录新建一个文件 webpack.dll.config.js const path = require('path'); const webpack = require('webpack'); module.exports = {

作者：xbl https://juejin.im/post/5cf3365ff265da1b9612ec78 先自我介绍一下，本人 3 年转行程序媛一枚，今年 4 月底裸辞。 5 月出去旅游一趟，回来找工作两周，面试 8 家，通过 4 家。 目前已经入职。 在这一个月的时间里，关于前端学习、裸辞、面试有些思考，希望和处于相同困境和疑惑的小伙伴们一起分享。 关于面试 先说说面试吧。 面试题就不分享了，掘金上有非常多优秀的面试题总结文章，文末我会将自己看过并且觉得有用的链接贴出来，刷面试题，让我们通过一面大概率是没有问题的。 由于我是转行做前端，而且之前的学习工作经历和IT一点关系都没有，深感自己的知识结构和基本功是非常欠缺的，例如数据结构、算法、设计模式、网络相关的技能需要在面试前好好准备下。面试的时候可以表达这些方面不太擅长，但是最好不要完全不懂不会不知道。 如何通过二面，甚至是三面，在我看来，就是反反复复审视自己的简历，上面所有提到的技术点、关键词，你是否了解如何使用，是否了解原理和相关知识点，是否有真实的项目经验支撑，这很重要。 所以，我们的简历既要有足够的亮点，能够通过招聘者的初步筛查，又不能在面试的时候把我们难倒。我遇到比较严格的一次面试，就是对着简历一行一行地问，有答的不会的或者不好的直接在简历的技术点上画✘，压力山大。 复习基础+看面试题+准备简历技术点/项目经验

原文链接: vue 自制tabbar 组件 一个通过使用tabbar切换路由的组件 点击下面的tab，跳转到指定的路由，注意每次该页面激活时需要根据页面的路由来设置对应 的tab为激活状态，否则，再某一页面刷新后可能会出现tab和显示的路由不匹配的问题 <template> <div class="tabs"> <div v-for="tab,index in tabs" :key="index"> <div class="tab" @click="changeTab(tab,index)"> <!--:style="'background-image: url('+tab.base+');background-size:100% 100%'" class="tab"--> <img :src="cur_index==index ? tab.active : tab.base" alt="" class="tab-img"> <span class="tab-name" :style="cur_index==index ? 'color: #1296db':'color:rgb(111,111,111)'">{{tab.name}}</span> </div> </div> </div> </template> <script> export default { name:

后台回复“ 送书 ”，免费参与送书活动 年底了，很多公司都在裁员，许多朋友都在被迫找工作，年底应聘小浪潮来临，老李我最近也在负责我们公司的招聘，但是面试过程大部分前端面试者给我的感觉思维比较窄，以及陈述问题时候比较乱，整体给人感觉不是理想。 下面是我作为一个面试官从三个维度给面试者建议和思考吧。 一．自我介绍 1.自我介绍 ，可以简单介绍你毕业什么学校，什么专业 2.出来负责的项目 ，每个项目自己充当的角色 3.每个项目使用前端技术+后端技术 简单大概的说出来就可以了，不要详细到你哪年进入公司，哪年离开公司，负责项目做什么的，说一大通。这个对我们面试官来说，想让你自我简单介绍，其实考察点有两方面： A.面试者的表达能力和概括能力 B.面试者目前掌握什么技术，做过什么项目，在项目中的角色来初步判定这个人的能力 二．问题回答 在本人问他们做过项目中，自己感觉挑战最大的项目是什么，你在这个项目中做了什么，遇到什么问题，怎么解决这些问题的 1.有些面试者给我的答案直接说没有比较大的挑战；这个让我感觉这个人可能没有听懂我的问题，工作那么多年，难道没有一个项目可以拿来说的，那我拿什么来判定你的能力呢？难道凭你几句话，说我很牛逼的，没有什么困难难得到我？我就信任你了，伯乐寻找千里马都要知道几个千里马的特征吧。所以没有你也要在面试前准备好自己做过的项目和总结，在项目中自己做了什么，充当什么觉得。

后台回复“ 面试题 ”，免费领取前端开发面试题 虽然金三银四已经过去了，但是前端开发工程师的招聘需求热度一直不减，我们前几天还要好几位朋友成功拿到过万的前端开发offer。 下面是我作为一个面试官从三个维度给面试者建议和思考吧。 一．自我介绍 1.自我介绍 ，可以简单介绍你毕业什么学校，什么专业 2.出来负责的项目 ，每个项目自己充当的角色 3.每个项目使用前端技术+后端技术 简单大概的说出来就可以了，不要详细到你哪年进入公司，哪年离开公司，负责项目做什么的，说一大通。这个对我们面试官来说，想让你自我简单介绍，其实考察点有两方面： A.面试者的表达能力和概括能力 B.面试者目前掌握什么技术，做过什么项目，在项目中的角色来初步判定这个人的能力 二．问题回答 在本人问他们做过项目中，自己感觉挑战最大的项目是什么，你在这个项目中做了什么，遇到什么问题，怎么解决这些问题的 1.有些面试者给我的答案直接说没有比较大的挑战；这个让我感觉这个人可能没有听懂我的问题，工作那么多年，难道没有一个项目可以拿来说的，那我拿什么来判定你的能力呢？难道凭你几句话，说我很牛逼的，没有什么困难难得到我？我就信任你了，伯乐寻找千里马都要知道几个千里马的特征吧。所以没有你也要在面试前准备好自己做过的项目和总结，在项目中自己做了什么，充当什么觉得。 2.有些面试者回答这个问题，在介绍项目的时候，很大概的说