蛐蛐的博客

文档：Introduction | Vue.jsVue（读作 /vjuː/，类似view）是一个用于构建用户界面的 JavaScript 框架。它建立在标准 HTML、CSS 和 JavaScript 之上，并提供了一个声明性和基于组件的编程模型Vue 的两个核心特性：Vue 是一个框架和生态系统，涵盖了前端开发所需的大部分常见功能。Vue 被设计为灵活且可逐步采用。可以以不同的方式使用 Vue：在大多数 Vue 项目中，使用类似于 HTML 的文件格式创建 Vue 组件，称为单文件组件。Vue SF

文档：Nuxt - Server Side Rendering1.简介服务器端渲染 (SSR) 是应用程序通过在服务器上而不是在浏览器中渲染网页的能力。服务器端向客户端发送一个完全渲染的页面，客户端的 JavaScript 接管。...

1.简介一般会有一些全局数据存储在store里，同时也会存储在localStorage里但是刷新页面时，store会重新初始化，这些数据就会全部丢失如果在一个页面的mounted钩子里初始化，又会显得很分散，不好维护2.解决方式一，初始化时直接赋值const Store = { state: { tags: JSON.parse(Vue.localStorage.get('Tags')), }}失败，因为ssr时访问不到localStorage..

文档：javascript - [Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node' - Stack Overflow1.简介nuxt+vue2，首先进入一个页面，点击类似列表里的一个item，跳转到新的页面，此时控制台报错Failed to execute 'insertBefore' on 'Node': The node before which the

1.简介<img class="validate-icon validate-icon-footer" v-if="xxx" src="/invalid-input.svg" alt=""><span class="payment-error-msg" v-show="xxx">Please enter your email address.</span>如上代码，当第一次触发错误条件时，首先出现错误消息，但是位置会向上偏移之后1秒以内会出现错误图..

仓库：vue-client-only/index.js at master · egoist/vue-client-only · GitHub1.简介client-only用于在ssr中指定组件在客户端渲染2.原理export default { name: 'ClientOnly', functional: true, props: { placeholder: String, placeholderTag: { type: Stri

文档：Nuxt - Server Side Rendering1.简介因为大部分的渲染过程处于 Node.js 环境中，所以可以访问 Node.js 对象。无权访问window或document对象，因为它们属于浏览器环境。但是，可以通过使用beforeMount或mounted钩子访问window或document。2.使用2.1 访问浏览器环境假如在data函数中使用window<template> <div> {{ n

1.简介在一个vue项目中分为两种静态资源：public目录：存放外部js、css等src/assets目录：存放组件img、background-image引用的图片等静态资源2.public静态资源2.1 外部静态资源这些静态资源包含了编译之前就存在的外部js、css，如layui、jquery等等js文件，这些文件在index.html中引入如下： <link rel="icon" href="<%= BASE_URL %>...

1.简介一般的vue项目都有一个初始index.html，而其他js、css都是这个html引入的，默认情况下使用绝对路径引入，如/js/app.js这样就有一个问题，静态资源经常要部署在不同的上下文路径下，如nginx将vue静态资源部署在/static下此时使用绝对路径访问不到index.html引入的js、css等，而相对路径是不变的2.解决vue.config.jsmodule.exports = { publicPath: ''}...

1.简介vue传递属性报错：error Unexpected mutation of "xxxx" prop，其中xxx为属性名2.解决vue传递属性时如果没有.sync修饰符，默认不允许在子组件中修改属性，而v-model也算是一种修改如果属性是一个对象，修改对象的属性也算是修改，v-model改为:value即可...

1.简介vue使用页签模式，组件使用keep-alive缓存，发现页签关闭后缓存组件未销毁，只是出于非活动状态2.解决使用keep-alive的include属性，这个属性包含了缓存组件的名称，可以将其赋值为动态属性页签storeexport default { state: { current: layui.data('tag').current || {},//当前页签 list: layui.data('tag').lis...

1.简介vue在scoped样式中书写css，选择器选择了子组件中的class，此时样式不生效<template> <div class="layui-layout layui-layout-admin" :class="{'hide-menu':collapse}" id="app"> <!--全局顶部--> <global-header></global-header> <!--.

1.简介layui与vue集成，scoped样式不起作用2.解决layui渲染出的dom元素没有scoped标志data-v-49bca07e如果使用选择器选择layui的元素，不能卸载scoped样式中

1.简介页面为布局页面，通过router-view显示子路由页面，现在需要点击按钮刷新子路由2.解决<router-view v-if="isRouterAlive"></router-view><keep-alive v-if="isRouterAlive"> <router-view ></router-view></keep-alive>需要使用v-if，确保子组件被销毁 如果...

1.简介vue集成layui，下拉菜单写在组件里，发现没有下拉效果2.解决vue使用js渲染dom，layui在加载模块时通过第一次调用模块的render()、init()方法来进行初始渲染，所以当首先加载layui.all.js，后加载vue的app.js时，会出现vue渲染的dom没有被处理的情况，需要在mounted方法里手动渲染 mounted(){ layui.element.render(); }此页面出现了几个模块就要渲染几...

1.目标首先配置列，根据配置渲染表单，每个表单项绑定配置中的属性2.方案<template v-for="(item) in showQueryColumns" > <el-col :key="item.prop" :xs = "24" :sm = "12" :md="12" :lg = "12" :xl = "6"> <!--字符串类型--> <el-form-item v-if="item.type==.

1.目标默认前端只配置登陆、注册、主页等路由，其他路由登陆时从后台获取，动态生成菜单、路由渲染2.问题后台配置了组件全名如：@/layouts/RouteView但是跳转时控制台报错，can't find module 'xxxx'也就是这样找不到3.解决修改component属性生成方式：/** 转换菜单对象为路由对象 */function convertRoute(menu) { let route = { name: men..

1.安装node-sass默认使用的是css，但是其中变量分布难以修改，如果需要提取变量则需要使用scsscnpm i -g node-sass2.安装主题工具cnpm i -g element-theme cnpm i element-theme-chalk注意：element-theme不支持node12+版本，element-theme-chalk只能安装在当前目录下3.生成主题变量文件et -i√ Generator variables file..

package.json"devDependencies": { "@types/html-webpack-plugin": "^3.2.0", "@types/node": "^10.10.1", "@types/vue-router": "^2.0.0", "@types/webpack": "^4

在使用ts开发时,常常需要如下形式导入:import * as a from './image/a.png'但是默认情况下,typescript的编译检查无法通过这样的文件后缀,这时可以通过ts的模块定义来解决module.d.tsdeclare module '*.scss' { const content: any; export = content;}...

tsconfig.json{ "compilerOptions": { // 与 Vue 的浏览器支持保持一致 "target": "es5", "lib": [ "es2015", "dom" ], "strict": true, "stri

以vue-class-component示例来看App.vue&lt;template&gt; &lt;div&gt; &lt;input v-model="msg"&gt; &lt;p&gt;prop: {{ propMessage }}&lt;/p&gt; &lt;p&gt;msg: {{ msg }}&lt;/p&gt; &a

首先，vue是单页面应用，内部进行路由切换时，根据模式的不同地址栏可能会发生改变，也可能不会改变，但是绝对不会因为路由切换、地址栏改变导致向后台发送请求而如果刷新页面，则会导致浏览器使用当前地址向后台发送请求，这个是无法避免的hash模式：使用/#/xxxx模式显示当前路由，当页面刷新时，#号后面部分不会发送到后台，所以访问到的还是index.htmlhistory模式：使用/x...

webpack.conf.tsimport * as webpack from 'webpack'import * as HtmlWebpackPlugin from "html-webpack-plugin"import { VueLoaderPlugin } from "vue-loader"/** webpack的ts配置文件 */const config: webpack....