当白的技术小窝 ( git : https://github.com/canwhite )

vue 路由拆包，自动导入

代码自动格式化和volar卡顿

vue3 eventBus

vue3 router

vue中的proxy主要作用类似于nginx； 将本地请求转发跟随vue项目启动的本地服务； 然后由服务端去请求远程服务端；而本地服务和本地H5资源，因为同源，所以没有跨域的问题

父组件中写一个监听v-on:key = callback 子组件中发布this.$emit("key",value)发布订阅的话自己写了也比较多，yarn add qc-event-bus用法和上边类似，可以看文档qc-evnet-bus还写了一种异步转同步的发布订阅yarn add async2syncasynctsync...

vetur 和 volar

provide和inject主要是为了高阶插件和组件库提供用例，但是也可以用于业务中，例如将祖先组件的this，暴露给子孙组件以便可以获取祖先组件的data在祖先组件中provide：------------------------------------ data() { return { color: "blue" }; },------------------------------------- provide() { return {

1.效果2.css实现 .item-selected{ font-size: 18px; font-weight: bold; color: white; //给当前元素添加相对定位,也就是after的父级 position: relative; &:after { content: " "; width

1.首先改变本地host映射下载：switchHostswin上切换失败是因为权限不够1.找到host文件C:\Windows\System32\drivers\etc2.右键host，点击属性，选择安全 （在 2.右键host，点击属性，选择安全 这里加点操作 要把"常规"中的"属性"的只读不勾选,否则还是不能切换成功）3.赋予User所有权限------------------------------------mac的话更方便，输入本机密码就可获取权限2.在switchHo

最近接受后台html，然后显示的时候图片大小超过了边界，出现了左右滑动的情况，以下写法可以解决问题<style scoped> .zhengwen >>> img { max-width: 100%; height: auto; }</style>

template <div class="msg"> <img src="../../static/fx.png" /> <div class="alarm"> 500 </div> </div>css<style scoped> .msg { position: relative; } .msg img { width: 42px; height: 42px; } .alarm {

vue.config.jsconst path = require("path");const resolve = dir => path.join(__dirname, dir)module.exports = { chainWebpack: (config) => { config.resolve.alias // 添加别名 .set('@', resolve('src')) .set("@libs",resolve('src/l

如果弹性布局可以换行；flex-wrap: wrap;行间距离就不是align-items控制而是align-content: flex-start来控制了.scroll{ height: 1140px; width: 100%; box-sizing: border-box; padding-left: 12px; padding-right: 12px; display: flex; justify-content: space-between; flex-wrap: wra

主要是提供了slot-scope来获取当前row对应的值然后具体在一行中判断某个值的时候，用scope.$index, scope.row来拿eg：v-if=“scope.row.name != 'xxx” <el-table-column min-width="50%" align="center" label="操作"> <template slot-scope="scope"> <el-button

目标：实现当鼠标悬浮，给所在block边上加上阴影的效果；分析：这种一般都是逻辑层和渲染层一起努力逻辑层给个mouse_index，当和当前block的index匹配的时候，就通过:class="mouse_index==index?'item-sel':'item'"来作样式切换效果：代码：(1) template：<div class="disp"> <div :class="mouse_index==index?'item-sel':'item'"

用require动态引入真麻烦 data() { return { header:require("../assets/header.jpg"), }; }, <div class="header" :style="{backgroundImage:`url(${header})`}"> </div>

一、require和import的区别require用于读取并执行js文件， 并返回该模块的exports对象， 若无指定模块， 会报错。CommonJS规范加载模块是同步且动态的， 只有加载完成， 才能执行后续操作。可以在代码中引入import用于引入外部模块， 其他脚本等的函数， 对象或者基本类型。import属于ES6的命令， 它和require不一样， 它会生成外部模块的引用而不是加载模块，等到真正使用到该模块的时候才会去加载模块中的值。二、动态引入和静态引入webpack支持node的c

组件是扩展的 Vue 构造器，“扩展”的含义就是根据自己的需要去定制Vue构造器MyComp=Vue.extend({template:'<div>我就是组件</div>'})模板中的<MyComp>...</MyComp>是实例化组件的一种方法,相当于:new MyComp() so 实例化的组件就是vue实例PS：这里还可以补充一下vuexvuex的实质就是没有扩展template的Vue组件...

讲起这个主要是在一些微服务框架中可以进行状态管理的再封装1.首先在man.js里边（当然也可以单独拿出来）//最小化的跨组件状态管理器,一处变化全局改变const obser = Vue.observable({ count: 0, name:"qc",})Vue.prototype.$obser =obser;2.在具体组件中1.template<button @click="setCount" style="margin-top:50upx;width:100%"

生命钩子webpack中的tapable核心库是在学习vue、react和angular的生命钩子的时候发现的，所以做了这么一套课，自己学的时候也旨在分享给大家，如果对你有帮助，请在相关的视频下素质三连，爱你么么哒~相关视频资源webpack-tapable-1-目标和基础概念webpack-tapable-2-同步钩子的使用webpack-tapable-3-异步并行钩子的使用webpack-tapable-4-异步串行钩子的使用webpack-tapable-5-钩子的封装webpack

Pre：看下效果一.templatecells是一个容器，cell是为了提供高度和下划线，content是一个栅栏<!--显示列表的部分--><divclass="cells"v-for="(item,num)inmapList":key="num"@click="details(item)"><divclass="cell">...

这里主要写一个注意事项：如果要对外部组件进行修改，需要把scoped去掉这样才能实现回溯源头否则，对外部组件修改的一些效果很有可能出不来去掉之后，只是当前页面的样式修改了，并不会污染全部...

Ramda是一个函数式编程的库，满足两个原则：ramda 所有函数都支持柯里化 function first，data last（写参数的时候函数在前，数据在后）在node中使用相对简单，在vue中如何使用呢？首先你需要把Vue CLI 版本升级到3.0以上，升级方法，可以自行百度。创建项目和之前的vue init webpack projname有所不同：vue creat...

环境搭建 项目脚手架搭建或者初始化 | 项目结构 页面编写、逻辑层和生命周期 路由配置 网络库使用 组件和api使用 调试和打包 一、环境搭建安装npm install -g @vue/cli二、项目脚手架搭建或者初始化 | 项目结构初始化一个uni-app项目vue...

1.package.json"ramda": "^0.26.1”,2.在vue中局部使用：import * as R from ‘ramda'console.log('=======Ramda',R.map(x=>x*2)([1,2,3]));3.在vue2.0中全局使用：index.js中import * as R from 'ramda'...

主要是利用v-if的重建销毁特性来重置：<div class="flexdiv" v-if="isRouterAlive"> <my-component>...</my-component></div>然后在data里：isRouterAlive:true在需要重置的地方：this.isRo...

因为这个方法和node的监听机制特定相似，所以单独拿出来了解一下。而且它的能力特别强大：可以父子、兄弟、隔代之间传递数据核心在于一个在父子、兄弟、隔代之间传递的统一的Vue实例。先说一个终极方法：//main.js//创建一个统一的对象Vue.prototype.$SS = new Object();然后在任何你想要使用的地方：this.$SS.mes...

http://localhost:8080/#/login输入路由路径的时候，会出现一个#这是因为路由默认mode:hash的原因改为history就可以了export default new Router({mode:"history",routes: []})...

你可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = 'My App'这样$appName就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。如果我们运行：new Vue({ beforeCreate: function () {...

在webpack.base.conf.js 里边resolve，设置alias：resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}},例如：默认有'@': resolve('src'),相当于一...

组件的name和element里边的id重复了改一下就可以了<script>export default { //name:'header' name: 'myheader', data () { return { msg: 'Welcome to Your Vue.js App' ...

在路由中设置：import Router from 'vue-router’import Vue from 'vue'import sideBar from '@/components/sideBar'import header from '@/components/header'Vue.use(Router)export default new Router({...

一、首先filters我们写俩过滤器，内容省略filters:{ //日期转换 cdate(val){...}, //时间转换 ctime(val){...}, },二、然后我们在methods里边的一个方法中使用 //对请求到的数据写个trap加值 this.dataList.forEach...

9月30日，尤雨溪在medium个人博客上发布了vue3.0的开发思路，国内有翻译的版本，见文章最后的参考链接。3.0带了了很大的变化，他讲了一些改进的思路以及整个开发流程的规划。vue3.0的改进思路vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法，而3.0对这三部分都做了更改。1. 响应式2.x的响应式是基于Object.definePro...

最近写node返回json，正常情况下，请求localhost:3500就会看到结果：因为请求的时候端口不一致，在前端请求的时候会出现跨域请求的问题：How？在config/index里边添加proxyTable: {"/api": {//使用api来替代http://localhost:3500 target: "http://localhost:350...

一、接受一个单独的post对象prop：<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>组件内部的实现：Vue.component('blog-post', { props: ['post'], templat...

在组件中我们写上具名插槽，和不具名插槽<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <f...

<div class="button_div"> <ynet-button :class="isBtnFlag ? 'ynet_button_light' : 'ynet-btn_bom'" @click-native="doAPost">{{signTypeText}}</ynet-button></div>PS: :...

计算属性<div id="example"> <p>{{ now }}"</p></div><script>var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { now: function ()...